Summary
Identifying notes and placing them at logical breaks in the text minimizes their impact on the reading of the primary text.
Techniques
- Identify footnotes within the text using the
aside
element. [WCAG 1.3.1] - Group footnotes or endnotes at the end of a section or work in lists. [WCAG 1.3.1]
- Link note references to their notes. [WCAG 1.3.1]
- Backlink notes at the end of a section or work to their references. [WCAG 1.3.1]
Examples
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>
Note that the doc-endnotes
and doc-endnote
roles are used on the section
and list items, respectively. The doc-endnotes
role cannot be used on lists.
<section epub:type="endnotes" role="doc-endnotes">
<h2>End Notes</h2>
<ol>
<li role="doc-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 …
</li>
…
</ol>
</section>
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;
}
The backlink precedes the note text so that the user will be aware that such a link is available.
<aside role="doc-footnote">
<p><a href="#ref" role="doc-backlink" title="Go to note reference">1.</a> According to the usual nomenclature, the …</p>
</aside>
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 note before being able to activate it.
<li role="doc-endnote">
<p>According to the usual nomenclature, the …</p>
<p><a href="#ref" role="doc-backlink">Go to note reference</a></p>
</li>
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 HTML5 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 placed within the primary narrative should be tagged using the HTML5 aside
element (see
Example 1). This usage ensures that even if their semantics are not
recognized, the notes will still be treated as secondary content due the nature of the HTML5
aside
element.
Notes that are grouped at the end of a section do not need to be individually tagged as
aside
, but should be grouped using 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 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 HTML5 a
element.
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).
Back Referencing
Although not specifically required to be accessible, it is good practice to backlink groups of notes to their referent locations in the text (see Example 4). If a user is surveying the notes, backlinks will allow them to quickly find the text the note refers to.
Related Links
- DPUB-ARIA —
doc-footnote
- DPUB-ARIA —
doc-endnote
- DPUB-ARIA —
doc-endnotes