How to Export Accessible, 508 Compliant HTML Layouts from InDesign

header image for accessible, 508 complaint HTML 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

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
bridge with rails to get across

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.

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.
alt text in the object export options dialog within indesign

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.

comparison of single text block vs separate text blocks

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

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.
roof with colored tiles

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

Accessibility Assessment Tools

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

Here are some examples.

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.

Get updates from Ajar Productions

Sign up today and get the InDesign Split Text premium extension for free!

Unsubscribe at any time. Powered by ConvertKit

Join the Conversation

  1. Cass says:

    In your blog you write, “You can use the Mobile Article Explorer to include full text in your document if you don’t want to use the technique above (Object Export Option) to include more alt text.

    Does the mobile article player do the equivalent as the Object Export Option?. If so, I do not see the point of filling out both which would be essentially doubling my workload. Please confirm if the mobile article player writes alt-text in the HTML. If not, it seems to me that the plug-in should insert the Object Export Option alt-text for you and not just 120 characters or whatever it is.

    If the mobile article player does take care of alt-text, than this than obviously a better way to go since you get the text-only pop up feature as your two for one.

    1. Justin says:

      The Mobile Article Explorer can support very long articles. The alt attribute is limited. Tag attributes are not designed to be extremely long.

  2. Maurice says:

    Hello, does In5 use the InDesign Articles panel for reading order?

    1. Justin says:

      in5 uses the stacking order from the InDesign Layers panel. That saves from having to add z-index values to everything.

  3. Hi, it was suggested to me that I try Axe DevTools to check accessibility on my In5 content.

    It found one critical error: “Zooming and scaling should not be disabled”.

    The good news was that there were no serious issues found.

    There were 26 moderate errors though, all the same: “All page content should be contained by landmarks”.

    Finally there was one Minor issue: “id attribute value must be unique”.

    What I’m asking is are these important issues? Will In5 eventually address these things? Is there an easy way to fix them in InDesign or in the exported HTML?

    I’m a little concerned that my In5 exports are going to measured by this tool, let me know what you think!

    1. Justin says:

      Hi Maurice,

      There are several different tools like this and many of the generate warnings that are inconsequential. So it’s not realistic to expect that in5 will address all warnings from all dev tools.

      However, we do aim for constant improvement, and we always try to address critical issues. I think we’ll hold an accessibility feedback session later this year and I’d love to have your input. I’ll send out an invite via the newsletter when the time comes.

      Best,
      Justin

Leave a comment

Your email address will not be published. Required fields are marked *