Top Tips for Creating Accessible EPUB 3 Files

Top Tips for Creating Accessible EPUB 3 Files

1. All text must be available in a logical reading order

Text must not be presented as images, be reordered by CSS, or require scripting to be accessed. Use structural markup to define the natural reading order of the primary narrative and to distinguish secondary material such as footnotes, references, figures, and other auxiliary content.

2. Separate presentation and content

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.

3. 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. This is particularly important for academic, educational, and other complex texts.

4. 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.

5. 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 as defined at (http://idpf.org/epub/vocab/structure/) to identify content.

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

Any content embedded in an image is not available to visually impaired readers. If the textual contents of a table or image are required for comprehension of the document, use proper and complete markup for text and tabular data, including headers and scope attributes for tables. If images of text are unavoidable, provide a description and transcription of the text and use accessible SVG. Accessible SVG graphics allow text in images to be rendered in an accessible way. They can also make it possible to deliver tactile images electronically to blind users with appropriate devices or to help automate the creation of tactile images that can be mailed to the reader with minimum human intervention.

7. Use image descriptions and alt text

Every image should have a description, caption or alt text unless it is solely decorative. See the DIAGRAM Center Image Guidelines for EPUB 3 for mark up best practices.

8. Include page numbers

Page numbers are the way many people navigate within a book. For any book with a print equivalent, 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>.

9. 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>.

10. 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.

11. 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.

12. Make interactive content accessible

Interactive content using JavaScript or SVG should be accessible. All custom controls should fully implement ARIA roles, states, and properties, as appropriate.

13. Use accessibility metadata

As part of a general good practice of documenting the accessibility of your content, provide accessibility metadata in your files so end users know what features are there and search engines can discover your accessible materials.

14. Make sure your processes support the above best practices

  • Initiate a sustained company-wide effort to make accessibility a core value in the production and dissemination of content, including development of a company policy statement to express the accessibility commitment.
  • Develop and implement accessibility guidelines and training for authors.
  • Develop and implement accessibility guidelines and training for editorial and production staff.
  • Discuss accessibility requirements and standards with vendors.
  • Include an accessibility review in the quality-assurance process.
  • Include accessibility information on your website and appropriate marketing materials.
  • Add accessibility awareness training for customer service staff.


[This work is licensed under the Creative Commons Attribution-NonCommercial 2.5 Generic License.]

Ideas that work.The DIAGRAM Center is a Benetech initiative supported by the U.S. Department of Education, Office of Special Education Programs (Cooperative Agreement #H327B100001). Opinions expressed herein are those of the authors and do not necessarily represent the position of the U.S. Department of Education.

HOME | BACK TO TOP

  Copyright 2019 I Benetech

Log in with your credentials

Forgot your details?