Building Accessible EPUBs with InDesign

Kevin Callahan details how to build ebooks with a strong foundation to reach more readers.

As you go about your day, you may not think about examples of accessibility, but you can find them everywhere. Think about crossing the street at the corner: a curb cut makes it easy to get onto the sidewalk if you’re in a wheelchair or pulling a suitcase. Or, look at closed captioning on TV: you don’t need to listen, but you can keep an eye out for an interesting story while you’re on the treadmill.

Now think about reading a print book. If you’re sighted, you probably don’t have a problem. But what if your vision is bad, or if you’re blind? What if you’re dyslexic or color blind?

Print books are limited in their usability in a way that ebooks aren’t, because eReaders like the Kindle and the iPad come with text-to-speech features. And fortunately, the ebook designer can enhance the usability of text-to-speech tremendously, right in InDesign. You can build in features that help the text-to-speech software not just read the words aloud, but also to help the user navigate from chapter to chapter, to hear descriptions of images, and to identify the different types of text, such as sidebars, captions, footnotes, and tables. Plus, you can use heightened color contrast and special typefaces to help visually impaired folks discern letterforms on colored backgrounds.

An accessible EPUB includes many features that allow people to read what they want, when and where they want. This article lays a foundation for how to set those abilities up in InDesign. We aren’t facing much extra work; we’re just shifting how we work to achieve broader results than we can with print.

From Structure to Semantics

When

thinking about accessibility, it helps to remember that we’re really talking about a machine displaying content. Look at a print book. You turn a page and you recognize design elements that mean you’re moving into a new chapter. But a reading device can’t recognize those elements in the same way.

An e-reader doesn’t glean information from your design, or from the text itself. Instead, it has to be told, via special “tags” in the ebook, things like this is a first level head (h1), this is a sidebar (aside), this is an illustration (figure). It’s just a machine; it needs those tags.

Figure 1 shows an example of what accessible HTML5 semantic markup looks like, with tags inside angle brackets.

Figure 1: Structure applied to content with semantic markup

In this example, the <section> tag tells the machine we’re beginning a new chunk of text. Then, for clarity, the tag includes epub:type=”bodymatter chapter” to say it’s the start of the main text of the book, and it’s a chapter. We read some text, and then a new, nested <section> begins. Inside that tag is an <aside>, which is like a sidebar.

If you’re using the accessibility features on an e-reader might want to hear all of the chapter titles read aloud, and choose to jump to a specific chapter. That can happen if the <h1> tag is applied only to chapter titles. You can choose to skip sidebars tagged <aside> when reading the main text, hear a picture description before reading its caption, and so on. (These features aren’t available in all e-readers today, but we have to aim for that possibility.)

How do we get that information into an ebook? Through structure and semantics.

Structure is the general outline of a book, as in <section> and <h1>. Semantics go further, assigning specific attributes to those generic elements: frontmatter, bodymatter, backmatter.

Semantics tells us whether a word is italicized because it’s emphasized (<em>) or because it’s a citation to a book title (<cite>), or whether a word is bolded for display purposes (<b>) or because it’s a WARNING (<strong>).

The machine reads what we tell it to by our markup. The human touch is evident in every choice we make in bookmaking, even if it’s only visible to a machine. And InDesign does a pretty decent job adding this information.

Mapping Styles

How does InDesign lay the foundation for an accessible EPUB? The answer lies with style mapping.

Just as you do for Word styles when importing text into InDesign, you map InDesign’s paragraph, character, and object styles to HTML tags when you export to EPUB. For example, you can map the paragraph style Chapter_Title to <h1> and the basic Text paragraph style to <p>.

The quickest way to do this is to access the Edit All Export Tags command from any of the style menus. In this single dialog box, you can edit all the styles used in a file and enter corresponding HTML tags and CSS classes. (Figure 2).

Figure 2: Access Edit All Export Tags from the panel menu of any of the Style panels (top). In the dialog box, you can enter CSS classes (bottom).

If you let InDesign create the CSS document, it will create classes with names based on the paragraph, character, or object style names. If you develop your own class names, you can plug them into the Class column, and InDesign will use them. I prefer to assign my own class names, since it makes my export much more predictable.

TIP: You can also designate a tag and a class from within an individual style’s Paragraph Style Options dialog box. If you do that, it’s a good idea to double check in the Edit All Export Tags dialog box, because I have found that in older versions of InDesign, the tags sometimes disappear from the style definition after you’ve clicked OK.

Custom tags

Here’s where real InDesign magic can happen. You don’t have to stick with InDesign’s suggested tags that appear in the dropdown menu in the Tag field like h1, h2, and so on—you can type in your own! For example, as we’ll see below, you can use object styles to create sections in your document. So, when you create an object style for an image, define its tag as <figure> (just enter the word “figure” in the field), which is the correct HTML5 tag for images. The same goes for a sidebar: give it an object style called sidebar, and define its export tag as <aside> (Figure 3).

Figure 3: Note how object styles have tags assigned. The “image” style is a figure in tag-speak, sidebar is aside, and so on. Also, each has its own class, so they will be easy to manipulate in the EPUB.

Once you’ve done that, you’re closer to a semantically correct EPUB file.

Keep Content and Design Separate

We’ve talked about structure and semantics. So where do design choices come in? The fact is that the aesthetics of a book—the typeface, text alignment, color—are meaningless for accessibility. But there are design choices that can make a book inaccessible. For example, in print, you can make a table row blue to convey meaning.

E-readers don’t derive any meaning from formatting like size and color. E-ink devices display only shade of gray. Text-to-speech can’t interpret color, and users with color blindness won’t see the blue table row on a color tablet. So it’s important when adapting a print project for digital use to keep an eye out for design elements that may need rethinking.

Using Object Styles for Semantic Markup

InDesign is “div” happy—it puts <div> elements around most everything you export to EPUB. Figure 4 shows sample markup from an EPUB export.

Figure 4: Typical code exported from InDesign, with a semantically meaningless element.

Unfortunately, the <div> tag has no semantic meaning—it doesn’t mean anything, so text-to-speech won’t know how it should render the content within the <div>. Instead, I recommend that you use <section>, the HTML5 tag. Earlier, we looked at how <section> and epub:type are used. Both can be assigned from within InDesign.

First, to assign the <section> tag, simply create an object style, and, in the Export Tagging area of the style options dialox box, enter section in the Tag field (Figure 5). Apply this object style to your text frame.

Figure 5: Create proper markup here in the Object Style Options dialog box

Next, consider epub:type. These designations tell reading software what part of the book you’re looking at. Some designations are:

• Cover
• Preface
• Chapter
• Glossary
• Index

See the Links and Resources sidebar for links to more information on epub:type definitions. You can assign these to a text frame in the Object Export Options dialog box and InDesign will include that markup in the exported EPUB (Figure 6).

Figure 6: When you assign epub:type in the Object Export Options dialog box (top), InDesign will include that information in the code (bottom). Note section and epub:type:chapter. Note also id=”_idContainer006″. This is often a meaningless identification tag InDesign assigns. You can strip them out, but be careful—they are sometimes destinations for toc.xhtml listings.

Split the story to assign different object styles

There is one problem with applying tags via object styles: It only works on the first text frame of a story. If the dedication and preface are part of the same story, even if on different pages in the print edition, you cannot assign epub:type to both text frames; you’ll need to break that thread.

InDesign has a couple of built-in scripts that can help. BreakFrame and SplitStory interrupt a thread and isolate text frames; unfortunately, they don’t leave the rest of the thread intact. Instead, I use a script called Storysplitter. It interrupts a long thread, leaving styles and positioning intact on both sides of the break. You can download this script and read about similiar ones in this post at InDesignSecrets.

With Storysplitter, you go through a book that’s threaded from front to back and you break it into chunks, for example, by chapter. Once isolated, apply an object style that maps to <section> and the appropriate epub:type. (Note: When you activate the script, it sometimes jumps you to the last page of the thread; it’s not an error. Just choose Layout > Go Back to return to the page you started at and continue.)

Navigation

Accessible EPUB3 includes rich navigation tools that give readers several ways into the text. They include the reading application’s table of contents (usually found in its menu); lists of illustrations, tables, and landmarks; and a page list. Figure 7 shows the navigation panel from Adobe Digital Editions with contents, landmarks, and page list.

Figure 7: The navigation panel from Adobe Digital Editions. From left, the TOC, page list, and landmarks.

The toc.xhtml is more straightforward than EPUB2’s toc.ncx. All listings are simple ordered lists; there are none of the annoying navpoint and playorder numbers to keep track of. (You should still include the toc.ncx in your EPUB—which InDesign exports for you—for older devices.)

Create the toc.xhtml using InDesign’s Table of Contents (TOC) feature (Layout > Table of Contents). You don’t need to insert the TOC in your book—just save your settings as a TOC style. Then, when you export to EPUB3, choose “Multi Level (TOC Style)” and your style for the type of Navigation TOC, in the General pane (Figure 8). This populates the e-reader’s Contents menu.

Figure 8: Choose the TOC style you want. InDesign creates the toc.xhtml from this.

If you’ve added epub:type tags to parts of your book, like Frontmatter and Preface (we described how to do this above), InDesign will add them to the Landmarks in the TOC.

Page List and listings of illustrations and tables add to accessibility by providing information about the contents to readers in various situations. Landmarks can let a reader using a small screen quickly find the index instead of scrolling through many screens or slogging through a long table of contents.

Logical Reading Order

When reading a book that has tables, footnotes, images, or sidebars, you usually read the text first, and then go to the sidebar or table for additional information. The HTML5 <figure> (for images and tables) and <aside> (sidebars and footnotes) tags signify elements that are not part of the main text flow. Someone using assistive technology may be able to delay reading anything marked <aside> or <figure>, depending on the software they’re using.

Images

Inserting images involves applying structure and including Alt Text (alternative text). One is simple to address; the other may require a team effort.

Structure

Figure 9: HTML5 figure element representing an image

Figure 9 shows the basic structure for an image with a caption in HTML5. If only InDesign would export like this! You’ll have to do a combination of style mapping and post-export Find/Change to accomplish it. Here are the steps:

Assign an object style to your image, and map it to generate the <figure> tag (Figure 10)

Figure 10: Map your caption paragraph style to (top) and your image object style to (bottom).

Assign a paragraph style to your caption and map it to <figcaption> (Figure 10).

Anchor your image in position, either before or after the caption.

When you export, you’ll see something like the markup in Figure 11.

Figure 11: Notice all the <div>s. As we’ve described, they don’t have any semantic meaning. You can leave them in place, or remove them. You do have to move the from line 21 (left) to after line 23, though, so it closes after the (right, line 24). Note that if InDesign creates the CSS, it may be using some of those classes inside the <div> to size or position the image. So be careful when deleting them; see if the class is in your exported CSS.

Alt Text

Alternative text sits inside the <img> tag and is read aloud when text-to-speech is enabled. It should provide information not found in the caption or surrounding text.

In the example above, the caption mentions John and Mary on the beach, and the Alt Text describes the weather and surf conditions.

If the description in the caption and elsewhere in the text are enough to convey the meaning of the image, you can leave the Alt tag empty: alt =””. Or, you can reference the text discussion: If the text mentions Figure 1, and the caption describes it in full, just put “Figure 1” in the Alt Text so text-to-speech listeners will know that they’re moving past the image.

How to Add Alt Text

You can add Alt Text in a couple of places.

The Object Export Options dialog box (Figure 12) allows you to choose Custom and enter the text, or else From Structure, which pulls from the image’s metadata if it has any.

Figure 12: Enter your own custom alt text here, or select another choice if your workflow allows.

You can also add the Alt Text in the HTML after export; just type it between the quote marks: alt=”sunny day and big ocean waves”.

Tables

Tables have always been problematic in ebooks. Multi-column, complicated material doesn’t fit on a small smartphone screen. Some reading systems have trouble parsing the code. This led developers to present complex tables as images. But that has problems, too.

Any text inserted as an image is not accessible. Text-to-speech readers can’t get inside an image. You can add Alt Text to describe the table, but that probably won’t work for complicated tables. So what’s to be done? There are some solutions.

• Rewrite simple tables so they are flowing text. Turn column headers into subheads, for example.
• For larger tables, use InDesign’s table tools. These will export to EPUB with the necessary HTML markup, especially if you map InDesign’s styles to HTML tags. You’ll need to go in and clean it up after export, but the exported markup is usable.
• If you must present tables as images, provide a fallback. One solution is to display the tables as live text on a website, and provide a link in the table caption.

Figure 13 shows the basic accessible HTML5 markup for a table.

Figure 13: HTML5 Table code

Sidebars, Footnotes, and Endnotes

Like images and tables, sidebars, footnotes, and endnotes often give extra information that can be read after the main text. That’s why they take the <aside> tag. For footnotes and sidebars, it’s simple to assign elements this tag within InDesign. Endnotes need a little extra work.

Footnotes

InDesign assigns <aside> to footnotes created with the Footnotes panel, but only if you choose “Inside a popup (EPUB3)” from the Footnotes Placement menu in the EPUB Reflowable Layout Export Options dialog box (Figure 14). Otherwise, you’ll have to add your own <aside> tags manually, by editing the ebook afterwards.

Figure 14: Left: The EPUB Reflowable Layout Export Options dialog box showing Inside a Pop-up. Right: The exported HTML showing the tag, along with the epub:type markup.

Sidebars

So long as the sidebar is in a non-threaded text box, simply assign it an object style with the export style mapped to <aside>. That’s it. (Figure 15)

Figure 15: Assign an unthreaded text frame containing the sidebar an object style that will export as an (top) and map the sidebar object style to export as (bottom).

Endnotes

Endnotes are new in InDesign CC 2018. However, when exported, they don’t take on any of the necessary semantics. Like footnotes, endnotes should be tagged <aside>, and they carry an epub:type of rearnote. The text reference needs an epub:type=”noteref”. After exporting, you can use Find/Change to adjust the HTML as shown in Figure 16.

Figure 16: HTML5 code for an endnote

Lists

Numbered and bulleted lists have their own markup in HTML5. InDesign exports those for you if you’ve set them up as lists.

In the HTML, a numbered list becomes an ordered list (<ol>), and a bulleted list is an unordered list (<ul>). When you export, you choose how to map them (Figure 17).

Figure 17: The default settings for converting lists as you export.

TIP: InDesign occasionally messes up lists in HTML. It will place the final closing tags far away from the end of the list. If you notice that paragraphs following a list are indented more than they should be, that means they’ve been mistakenly included in the list markup. Open the EPUB in a text editor, and look for the closing tags like </li> and </ol>. Move them from the wrong position to appear at the end of the list, before the <p> tag that starts the next paragraph (Figure 18).

Figure 18: Left: The closing tags for the list ( < li >  and < ol > ) are on lines 28 and 29, leaving the < li > that begins on line 25 unclosed. Right: To fix this problem, move the closing < li > and  < ol > up after the end of that final line item.

Language Shift

Marking a change from the dominant language in an ebook helps a reading system pronounce the word correctly. If your language is set to English: Canadian and your book includes some words in French, apply a character style to the French words.

First, create a new character style (call it french). The only attribute you need to apply is in Advanced Character Formats. Use the Language pull-down menu, and choose French (Figure 19).

Figure 19: Define language shift in a character style. InDesign will wrap it in the correct markup.

On export, InDesign will wrap the French-styled words in a <span> that includes the language attribute (Figure 20).

Figure 20: The includes the French language designation.

You might have to rely on your editor to provide a list of words or tag them in the manuscript.

Color and Contrast

Some readers have difficulty distinguishing colors when there’s not enough contrast between foreground and background. Think about type treatments where thin pale blue text sits over a medium-blue band. Combinations that work well in print may be illegible in ebooks, particularly in e-ink (grayscale) e-readers.

This is an issue if you convert your type treatment to a JPEG or PNG, for a highly designed title page, say. If the text is a very thin sans-serif rendered in 40% black, for example, chances are it will be illegible on an e-ink screen.

Test your ebooks on e-ink devices, and create an alternative color scheme if needed. Take values directly from InDesign, and input to your CSS as needed. See the Links and Resources sidebar for links to online color checkers, where you can see how accessible your combinations will be.

Emphasis

All italics are not <em>, nor are all bolds <strong>. InDesign provides only those choices when you’re mapping styles to CSS. But remember: you can input anything you want in the mapping panel. Ask your editor or author to help assign the correct tag.

Italic

There are three types of italic in accessible markup.

This ice cream cone is huge! (<em> for emphasis)

Voila! That’s how they serve them on board the Titanic. (<i> for foreign words, proper names)

I read all about ocean-going desserts in Cruise Food: A Guide to Onboard Cuisine. (<cite> for titles)

Bold

Desserts on your cruise. Ice cream cones are favorite desserts. (Use <b>, because the bold adds no meaning.)

WARNING! Eating ice cream too fast makes you want more! (Use <strong> when the bold needs to be emphasized.)

Accessibility Testing

Adding the features described here will help bring your EPUBs to a baseline of accessible content, but there’s lots more you can do. Since there are so many layers, it’s helpful to have an evaluation. Three services can help.

ACE Accessibility Checker for EPUB

As of this writing, Inclusive Publishing has just released ACE, the Accessibility Checker for EPUB. It’s still in beta, but early reports show it to be a valuable addition to an accessibility toolkit.

Global Certified Accessible

Benetech—a pioneer in making ebooks accessible—recently launched Global Certified Accessible. This program provides publishers with detailed feedback on their EPUB3 files, with suggestions for improvements.

FlightDeck

FlightDeck is an invaluable EPUB validation tool. Upload your EPUB and receive validation notes, retailer-specific guidelines, and EPUB3- and accessibility-specific tips. There’s a free handbook with lots of helpful information on best practices.

A Rewarding Effort

Maybe someday InDesign will be smart enough that making accessible ebooks will be nearly automatic. But in the meantime, it takes a fair amount of toil to build an ebook that can be enjoyed by everyone. Still, taking the time to understand and implement accessibility best practices pays off richly in the end. By following the steps outlined in this article you can produce well-structured content that will be easier to publish in any electronic format or media that may come down the pike.