Users must be able to perceive the association between a symbol and and its associated text.
The symbol is usually one of the following:
Double Asterisk: **
Double Dagger: † †
Numbers: 1, 2, 3, etc
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).
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).
We are currently looking into the current support status of the ARIA note role. For the time being, please use region.