Text

Footnotes

Published on

Description

Footnotes provide supplementary references at the end of content. In-text references link to the footnote, and each footnote links back to its reference point.

Example

Open in new tab
View HTML markup 
  <article>
  <p>Maintaining <a aria-describedby="footnote-label" href="#footnote-uid" id="footnote-uid-ref">footnotes </a> manually can be a pain. By using <a aria-describedby="footnote-label" href="#footnote-css" id="footnote-css-ref">CSS </a> counters to add the numbered references in the text and an ordered list to display the actual footnotes
    in the footer, it becomes extremely easy.</p>
  <footer>
    <h2 id="footnote-label">Footnotes</h2>
    <ol>
      <li id="footnote-uid">about uid <a href="#footnote-uid-ref" aria-label="Back to content">↵ </a></li>
      <li id="footnote-css">about css <a href="#footnote-css-ref" aria-label="Back to content">↵ </a></li>
    </ol>
  </footer>
</article>

Accessibility

  • Footnote links should use <sup> with an anchor linking to the corresponding footnote.
  • Each footnote should include a back-link to return focus to the referring text.
  • Use aria-describedby if the footnote provides a description of the linked content.
  • Avoid splitting footnote link text across elements — screen readers may announce characters individually.

References

  • Links — for general navigation links

Variables

None for footnotes