How to Export Accessible, 508 Compliant HTML Layouts from InDesign

I often get asked about accessibility and 508 compliance.

In this article, I’m going to demystify this topic by doing the following.

1. Explain accessibility and 508 compliance in simple, straightforward terms
2. Provide some general strategies for improving accessibility in your HTML content
3. Provide some specific strategies for exporting accessible, 508 compliant HTML from InDesign using in5

If you want to go deeper on this topic, there’s an Accessibility video course on Ajar Academy.

Accessibility Explained

Accessibility on the web depends largely how an HTML page is structured.

A web page should be structured so that people with disabilities can reasonably access the content within.

If you work for a U.S. federal agency (or an institution that receives federal funding) accessibility is mandated and referred to as 508 Compliance.

This includes:

• Government agencies
• Federal-funded nonprofits
• Public higher education institutions
• Public K-12 schools

Additionally, many large companies voluntarily choose to be 508 Compliant.

If your content is fully accessible, then it is also 508 Compliant.

What does it mean to be accessible?

There are a few common ways that a person’s experience of a webpage can be limited.

• Visual impairment
• Auditory impairment
• Inability to use a mouse or touchpad
• Color blindness

If your content compensates for these limitations and provides alternate information and navigation, then your content is accessible (and thus 508 compliant).

I’ll provide specific examples of how to make your HTML content accessible below.

A rabbit hole of acronyms

When looking into accessibility, you’re likely to find several other interrelated acronyms and numbered phrases.

Here’s a quick explanation of some of the other phrases you’ll encounter.

• WCAG 2.0 – This stands for Web Content Accessibility Guidelines. These guidelines are produced by the W3C and revised over time (hence the version number, 2.0).
• W3C – A group that sets standards for the web.
• ADA – The American’s with Disabilities Act. This act was created prior to the existence of the web but states that commercial and public entities should have “places of public accommodation” which now includes the internet. So it is very much inline with 508 compliance.

How to Make Your HTML Content Accessible

Let’s consider visual impairment for a moment.

Imagine that you couldn’t see a webpage. How would you access the content?

You would use screen reader software to navigate the structure of the HTML (rather than viewing the visual results of the HTML and CSS in the browser).

Screen reader software narrates the content of the HTML aloud to the user.

If your HTML is poorly structured, then it will be hard for the user to understand your content when it’s read aloud.

Good HTML structure increases screen readability

Good structure means that your <h1> tag never follows your <h2> tag (think about a newspaper with the biggest headline at the top).

And your tags are as specific as then can be.

You can use style mapping in InDesign to define Paragraph Styles as specific tags (e.g., <h1>) and in5 will use those tags in the output.

Consider and compare the following 2 structures for headlines.

1. <p class="my-big-heading-1">My Big Heading</p>
2. <h1>My Big Heading</h1>

The second example is clear and unambiguous to a screen reader (or a search engine).

The more specific your structure is, the more easily it can be read.

Use custom tags and ARIA roles for clarity

With the in5 Accessibility panel, you can control object tags the way style mapping lets you control text tags. You can also assign specific roles (e.g., menu, note, toolbar, etc) to help define structure for a screen reader.

You can also hide things from the screen reader if they’re purely presentational/visual elements, or show items only to screen readers.

It’s important to hide content from the screen reader when not in use to ensure a good experience for visually-impaired users. in5 automatically hides inactive Object States and pages to ensure that the screen reader is not overwhelmed with unnecessary content.

Alt text adds context

You can also add text to your HTML that will read by a screen reader.

This is known as alt text.

The follow example adds detail to an image using alt text.

<img src="images/1.jpg" alt="flashlight shining into a night sky"/>

Alt text should be included on anything that would need explanation if the content (e.g. an image) could not be viewed.

Using alt text with InDesign and in5 (InDesign to HTML5)

You can add alt text using the Object Export Options within InDesign.

1. Select an object in InDesign.
2. Choose Object > Object Export Options.
3. Select the Alt Text tab in the Object Export Options dialog box.
4. Choose Custom from the Alt Text Source menu.
5. Enter text into the text field, and click Done.

You can see the process in the video below.

If you haven’t set up alt text, don’t worry, in5 won’t rest there.

It will find useful alt text elsewhere, such as the following.

• XMP Metadata descriptions for images that have them.
• The text inside a text frame (when text is rendered as an image).
• Text from the Script Labels panel in older versions of InDesign that don’t have the Object Export Options feature.

This is one way that in5 creates accessible content without you having to think of it.

If you want to manually set specific alt text, you can always do so with the technique described above.

If you decide to render your InDesign text as images in the HTML output, don’t fret, there will still be alt text.

However, there is a limit to how long the alt text will get (120 character in this case).

Breaking your text into smaller blocks will ensure that you have better alt text, because each text block will have its own, specific alt text.

You can easily break up text frames using the Split Text extension.

The process is shown in the video below.

How to include full text with in5, even when rendering text as images

You can use the Mobile Article Explorer to include full text in your document if you don’t want to use the technique above to include more alt text.

Closed captioning for video

If you have video that is important—and not just decorative—then you should consider additional closed captioning (subtitles) for those who cannot hear.

in5’s Video widget includes the ability to add closed captioning/subtitles. Shown in the video below.

YouTube also has great captioning tools, so if you need closed captioning, consider hosting your video on YouTube.

The YouTube embed code can be copied and pasted into InDesign (and then exported with in5).

There isn’t currently an equivalent of closed captioning for audio, so consider using alt text or text on screen with audio.

Make hyperlink text descriptive

Consider a hyperlink that points visitors to your About Us page using the following text.
“Click here to learn about our company.”

Click here doesn’t provide any context about the link itself.

Instead, consider the following text.
“To learn more about our company, check out About Us.”

It will make more sense to someone using a screen reader, and it will score you points with Google.

Think about color contrast

Imagine the following.

• You can’t see the difference between two colors.
• There are two boxes on screen and one of them is a button.
• The only thing that distinguishes the button is that it has a different color.
• Because of this, you miss the button entirely and don’t take the required action.

If you’re designing with accessibility in mind, color is not enough to distinguish two items. There need to be other indicators (such as descriptive text).

Similarly, if two colors have different hues (i.e., one is red and one is green) but the same darkness/lightness, they may be indistinguishable to someone with color blindness.

Squint at your design to get a sense of whether you need more light/dark contract in your design.

Enable keyboard navigation when possible

For those who cannot use a mouse or keyboard—or those navigating via a screen reader—you’ll want to provide keyboard navigation.

in5 enables several kinds of keyboard navigation by default, e.g.,

• Page navigation with the Slider formats
• Media playback controls

Create a Skip Link for screen readers

You can create a special link (and/or instructional text) for viewers using screen readers, as shown in the video below.

This feature is available to in5 Elite and Enterprise licenses.

Accessibility Assessment Tools

If you’re unsure about the accessibility of your site, you can use tools (often browser add-ons) to get feedback.

The simplest way to check your content in the browser is use the Developer Inspection tools, as shown in the video below.

Here are some additional examples.

• WAVE toolbar for Chrome and Firefox.
• Juicy Studio toolbar for Firefox.
• Chrome Accessibility Developer Tools Accessibility audit for Chrome and adds Accessibility sidebar pane (in the Elements tab) to the native Chrome Developer Tools.
• Paciello Group toolbar for Internet Explorer.
• Paciello Group Contrast Analyser Native app for Windows and Mac that evaluates the color contrast of your site, and tells you it meets the WCAG 2.0 standards for color contrast.

How is Accessibility Related to SEO?

One last tip: Improving accessibility also improves your SEO (search engine optimization).

A search engine essentially uses an automated screen reader to index webpages.

That means that your very accessible site will be easily read by Google and marked as well structured, which will likely boost your search rankings.