Footnote

Symbols that guide users towards another section of the document for additional information.

Introduction

Users must be able to perceive the association between a symbol and and its associated text.

The symbol is usually one of the following:

• Asterisk: *

• Double Asterisk: **

• Dagger: †

• Double Dagger: † †

• Numbers: 1, 2, 3, etc

Example

Here is a footnote symbol contained under a "Seller Fees" section of the page:

<h2>Seller Fees</h2>
<p>This text has a footnote<sup>*<span class="clipped"> - See Seller Fees Notes</span></sup></p>

Here is the associated notes section of the page:

<section role="region" aria-label="Notes - Seller Fees">
  <h2 class="clipped">Notes - Seller Fees</h2>
  <ol>
    <li>This is an actual note</li>
    ..
  </ol>
</section>

Sometimes there are multiple footnote sections on the same page, therefore both the source symbol and target section much be uniquely identified (as in the example above).

FAQ

Why is the symbol not hyperlinked to the footnotes section?

While it is certainly possible to create a page anchor relationship between the symbol and the footnote section, doing so opens its own can of worms. For the time being we believe the strong visual affordance and semantics laid out above will allow all users to identify, navigate and discover the system of footnotes using their keyboard (to scroll the page) or screen reader (to jump to landmark or heading).

Why not use aria-describedby on the symbol to read out the description/footnote?

For sighted users, the symbol gives a visual clue that there is a footnote elsewhere on the page. The user is not forced to read the footnote. This reduces cognitive load for the user. Whilst we could use aria-describedby on the symbol, so that a screen reader would automatically announce the footnote content, we have determined that this would be overly verbose in most cases, and would increase cognitive load for the user.

Should I use role="note" or role="region"?

We are currently looking into the current support status of the ARIA note role. For the time being, please use region.