Summary

Identifying notes and placing them at logical breaks in the text minimizes their impact on the reading of the primary text.

Techniques

Examples

Example 1 — Footnotes in the body

Note that the doc-footnote role is used on an aside. Do not apply it to list items, as it will break the lists they belong to. Use doc-endnote to group notes into lists.

<p>
   In that
   year<a href="#ft2f" role="doc-noteref" epub:type="noteref">2</a>
   there were 67 mills engaged in the manufacture of
   cotton goods …
</p>

<aside id="ft2f" role="doc-footnote" epub:type="footnote">
   <p>
     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> …
   </p>
</aside>

<p>…</p>
Example 2 — Grouped notes at the end of a section/work

Note that the doc-endnotes role cannot be used on lists; it is used to identify the section containing the endnotes.

<section epub:type="endnotes" role="doc-endnotes"> 
   <h2>End Notes</h2>
   <ol>
     <li>
        <p>According to the 
           usual nomenclature, the branch flowing
           S.W. is called the Chattooga; this unites
           with the Tallulah to form the Tugaloo,
           which …</p>
     </li>
     …
   </ol>   
</section>
Example 3 — CSS to superscript note references

Note the use of the CSS ~= selector. If the role attribute contains more than one value (i.e., a fallback role) this selector ensures a match will still occur. See attribute selectors in CSS 2 for more information.

a[role~='doc-noteref'] {
   vertical-align: super;
   line-height: normal;
   font-size: smaller;
}
Example 4 — Backlink from footnote

The backlink precedes the note text so that the user will be aware that such a link is available.

<div role="doc-footnote">
   <p><a href="#ref" role="doc-backlink"
         title="Go to note reference 1">1.</a> According to
      the usual nomenclature, the …</p>
</div>
Example 5 — Backlink from endnote

The backlink follows the note text to avoid any conflicts with automatic list numbering. The link is placed in its own element so that the user does not have to listen to the full note before being able to activate it.

<div role="doc-footnote">
   <p>1. According to the usual nomenclature, the …</p>
   <p><a href="#ref" role="doc-backlink">Go to note
      reference 1</a></p>
</div>

Frequently Asked Questions

Should I use the doc-endnote role?

No. Use of the doc-endnote role is now deprecated due to a technical incompatibility with the core ARIA role module. ARIA does not allow roles from a module to satisfy the requirements of core roles, so although doc-endnote behaves like a list item, it technically does not fulfill the requirement that lists have list item children. That makes it invalid in both HTML list elements and as a child of the ARIA list role.

While AT uses should not experience any problems if you have already used the role, it is best to avoid it moving forward to avoid errors in your content.

The role is also generally redundant. If a section of notes is identified using the doc-endnotes role, users and assistive technologies will understand the list within the section contains the endnotes.

Explanation

Footnotes and endnotes have proven an impediment to the reading experience because they interrupt the narrative flow. When footnotes are placed immediately following the paragraph that references them, users 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 HTML structural elements, together with the role 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 user agents to ignore the notes except when followed from their referents, but it allows any user agent to handle them more intelligently (e.g., as pop-ups).

Notes that are grouped at the end of a section should be grouped using doc-endnotes role (see Example 2). Lists allow users to move through them more effectively (e.g., each list item number will typically correspond sequentially to the contained note number, and users 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 HTML a element to ensure users do not have to visually locate the corresponding note.

The sup element may be used to superscript note references, but it adds extra verbosity (assistive technologies will announce the text is superscripted in addition to being linked). The CSS vertical-align property can be set to superscript the a elements without the additional voicing (see Example 3).

Note

Until there is greater support for announcing the doc-footnote role, the sup element provides some context for the note references. As support for the role increases, however, the use of explicit superscripting will become redundant. At that time, preference should be given to CSS formatting.

Related Links