10 Tips for Creating Accessible EPUB 3 Files

The goal of the DIAGRAM Center at Benetech is to impact how image and graphic content for accessible instructional materials (AIM) is produced and accessed throughout the country. The DIAGRAM Center, WGBH National Center for Accessible Media (NCAM), and the U.S. Fund for DAISY are collaborating to identify challenges within the technologies, standards and production practices used to produce and display accessible images and graphic content within AIM, and develop technologies, tools, recommended practices and training materials that address them.

In support of this goal, the DIAGRAM Center has produced this document with 10 tips for creating accessible EPUB 3 files:

1. Separate content and presentation

Visual reading is only one way of accessing content. Do not use visual-only cues such as colored text, font size or positioning as the only clue to the meaning or importance of a word or section. Do not use tables or pictures of text to control the appearance of the content. The meaning of the content should be the same both with and without any styles or formatting applied.

2.  Provide complete navigation

Include a complete table of contents in the front matter and consider smaller tables of contents at the start of each section. Use <section> and <aside> tags in the content and the <itemref linear=”no”> tag in the manifest file to define a logical reading order.

3. Create meaningful structure wherever possible

Create a structure by using numbered headings in a logical structure. For other tagged structures, specify their content with the epub:type attribute. For example, the tag that contains the preface of a book might look like <section epub:type=”preface”>.  Specific tags are for specific content only (i.e., the <cite> tag is only for citations) and should be used according to the standard. Use the most specific tag available and do not automatically wrap <div> or <span> tags around everything.

4. Define the content of each tag

Include semantic information to describe the content of a tag.  A section tag for the table of contents would look like <section epub:type=”toc”> or a list of definitions in a glossary would be tagged with  <dl epub:type=”glossary”>. Use the EPUB 3 Structural Semantics Vocabulary definition to identify content.

5. Use images only for pictures, not for tables or text

Any content embedded in an image is not available to visually impaired readers. Use proper and complete markup for text and tabular data, including headers and scope attributes for tables. If images of tables are unavoidable, provide a link to a separate page containing the properly marked up tabular data.

6. Use image descriptions and alt text

Every image should have a description, caption, or alt text unless it is solely decorative.

7. Include page numbers

Page numbers are the way many people navigate within a book. Use the epub:type=”pagebreak” attribute to designate page numbers. Include the ISBN of the source of the page numbers in the package metadata for the book. A tag for a page number might look like <span xml:id=”page361″ epub:type=”pagebreak”>361</span>.

8. Define the language(s)

To make sure each word will be rendered correctly, specify the default language of the content in the root html tag. Indicate any words, phrases or passages in a different language by using the xml:lang attribute: <span xml:lang=”fr” lang=”fr”>rue Saint-Andre-des-Arts</span>.

9. Use MathML

MathML makes mathematical equations accessible to everyone by eliminating the ambiguity of a verbal description of a picture. There are many tools available to support MathML creation.

10. Provide alternative access to media content

Make sure the native controls for video and audio content are enabled by default. Provide fallback options such as captions or descriptions for video and transcripts for audio.

For more information, please visit diagramcenter.org