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 acrossIf 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 tilesIf 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
Justin | design,HTML5,InDesign,interaction,Tutorials | Monday, July 24th, 2017

Leave a Reply

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