Accessible PDFs from InDesign vs. Accessible HTML from InDesign

The article is written as a parallel to Adobe’s article on Creating Accessible PDFs, so that you can compare the steps required to set up accessibility for both PDF and in5, and to get a sense of the accessibility of the output.

For the purposes of this article, I will assume that you’re not interested in InDesign’s native HTML export, because it does not support layout the way a PDF does. In contrast, in5 exports HTML while maintaining your InDesign layout.

in5 is a 3rd-party InDesign plugin that can create accessible, interactive HTML output (without any coding on your part).

Both the PDF export and in5 can produce 508 compliant output from InDesign, but there are some key difference detailed in the article below.

InDesign Best Practices

The best practices between the in5 and PDFs from InDesign are largely the same.

• Use paragraph styles consistently throughout your document — always a good practice.
• Export tagging — both PDF and in5 will pick up on export tags that have been set in styles.
• Use inline images to control reading order — inline images are a good way to determine when an image’s alt text is read relative to an image. See Reading Order below for more on this topic.
• Add Alt Text — always a good and necessary practice in both formats.
• Use internal navigation — PDF relies on this. The in5 Accessibility panel also lets you mark an object’s role as navigation and/or apply a custom tag of <nav> to give you more control to designate which items are navigational.

Reading Order

For PDFs, the order in which items are read by a screen reader is something that you set up using the Articles panel in InDesign.

in5 uses the stacking order from the Layers panel. The bottom items are stacked first in the output to minimize the need for extra code to determine visual stacking.

If you want to create a reading order using the Articles panel with in5, you can do so using the Mobile Article Explorer (as shown in the video below).

The Mobile Article Explorer is fully accessible by keyboard.

Steps after exporting from InDesign

To create accessible PDFs, Adobe recommends opening Acrobat after export from InDesign to complete a few steps: assigning a language, specifying tab order, and then run an accessibility check.

With in5, no additional steps are needed after you export with InDesign.

in5 assigns a language automatically to the output based on the language used in the InDesign file, so no extra step is required on your part.

Additionally, in5 automatically sets the tab order for you using the layer stacking (bottom items come first in the tab order). Interactive items such as Buttons and Hyperlinks are are automatically tab enabled.

in5 also lets you create a Skip Link using the Accessibility panel. The Skip Link content is pushed to the top of the reading order so that it’s the first item read by a screen reader. You can also hide that content to people who are not using screen readers (which you cannot do in a simple way with a PDF).

Setting Alt Text

InDesign alt text can be applied—for PDF and HTML—via Object > Object Export Settings, Alt Text tab, Custom drop-down.

However, in5 makes it much easier to see and update alt text using the Accessibility widget.

Tagging

PDFs support <p>,<h1> through <h6>, and <artifact> tags.

in5 does far better in letting you control the semantics of the output.

in5 supports <p>,<h1> through <h6>, lists (<ul> and <ol>),  <em>, and <strong> based on Paragraph and Character styling and Export Tags.

in5 also lets you set the following custom tags using the Accessibility Panel: <nav>, <aside>, <main>, <header>, and <footer>.

The Accessibility panel lets you hide items from the screen reader (which works like the <artifact> tag in PDF), however in5 also lets you show items only to the screen reader.

Additionally, in5 lets you set an ARIA role (e.g., toolbar, menu, alert, group, note, dialog, etc).

Interactive Capabilities

Interactivity is the other area where in5 far outpaces PDF.

Interactive PDF cannot support audio or video consistently, animation, multi-state objects, embedded content, and it’s not responsive. We have an entire, separate article on how interactive PDF is broken, and all the things that it fails to support.

in5, on the other hand, supports all of these native InDesign interactive features and adds a bunch of its own interactive options (responsive layouts, 3D flip cards, flipbook page transitions, and more).

Online Training for Accessibility

The Ajar Academy has online video training courses to help you learn to create digital magazines, websites, and more using InDesign and in5.

The Accessibility & SEO Techniques course is dedicated to helping you create accessible files.

Cost

While PDF can be exported natively by InDesign, in5 is a separate add-on and requires its own subscription. All in5 output benefits from a number of accessibility features, but only the higher pricing tiers let you customize tags, ARIA roles, screen reader visibility, and create Skip Links.

Conclusion

in5 lets you control more accessibility options (settings custom tags and roles, providing screen reader instructions), and lets you create far more interactivity than PDF, but PDF is available at no extra cost. If budget is your primary concern, then choose PDF. If you want greater accessibility and interactivity, then in5 will excel.