EPUB 3 Accessibility Guidelines


Footnotes and endnotes have proven an impediment to the reading experience because they interrup the narrative flow. When footnotes are placed immediately following the paragraph that references them, readers had to manually navigate past them each time, as they are typically indistinguishable from text content. Even endnotes, grouped at the end of the section, require the user to jump past them.

The HTML5 structural elements, together with the epub:type attribute, provide a means of alleviating this problem, by clearly marking individual footnotes and endnotes, and sections of them. Not only does this allow accessible reading systems to ignore the notes except when followed from their referents, but it allows any reading system to handle them more intelligently (e.g., as pop-ups).

Notes placed within the primary narrative should be tagged using the HTML5 aside element (see Example 1). This usage ensures that even if the EPUB semantic is not recognized, the notes will still be treated as secondary content due the nature of the HTML5 aside element.

The type of note must be identified using the epub:type attribute. The EPUB 3 Structural Semantics Vocabulary defines the following note types:

Notes that are grouped at the end of a section do not need to be individually tagged as aside, but should be grouped in a section carrying the appropriate footnotes or endnotes semantic (see Example 2). Lists are an effective means of representing groups of notes in these sections, as they allow readers to move through them more effectively (e.g., each list item number will typically correspond sequentially to the contained note number, and readers should have the ability to jump through more than one list item at a time when there are many notes).

Notes in Tables

If notes occur in a table, avoid placing them in a tfoot element, as it is intended for summaries of the columns. Footnotes can follow the table or can be grouped together with the table inside a figure. See the Tables section for an example.

Note References

Note references must be tagged using the HTML5 a element with an epub:type attribute designating the property noteref.

Do not use the sup element to superscript note references, as it is redundant presentational tagging. The CSS vertical-align property can be set to superscript the a elements. (See Example 3 below.)

Back Referencing

Although not specifically required to be accessible, it is good practice to back-link groups of notes to their referent locations in the text (see Example 4). If a reader is surveying your notes, this will allow them to quickly find the text the note refers to.


Example 1 — Footnotes in the body
   In that
   year<a href="#ft2f" epub:type="noteref">2</a>
   there were 67 mills engaged in the manufacture of
   cotton goods …

<aside id="ft2f" epub:type="footnote">
      2 The manufacturing statistics for 1900 which
      follow are not those given in the Twelfth
      Census, but are taken from the 
      <em>Census of Manufactures</em> …

Example 2 — Endnote section
<section epub:type="endnotes"> 
   <h2>End Notes</h2>
      <li id="en001" epub:type="endnote">
         According to the usual nomenclature, the
         branch flowing S.W. is called the Chattooga;
         this unites with the Tallulah to form the 
         Tugaloo, which …
Example 3 — CSS to superscript note references
@namespace epub "http://www.idpf.org/2007/ops";

a[epub|type~='noteref'] {
   vertical-align: super;
   line-height: normal;
   font-size: smaller;
Example 4 — Back-linking notes
<li id="en001" epub:type="endnote">
   <a href="#en01-ref" title="note reference 1">1</a> 
   According to the usual nomenclature, the …

Compliance References and Standards