Building Accessible Footnotes

A native HTML footnote requires bidirectional linking and proper ARIA labels to ensure screen reader users aren't left stranded at the bottom of the page.

The Code

<p>This is a statement that requires citation.<sup id="fnref-1"><a href="#fn-1" aria-describedby="fn-label">1</a></sup></p>

<footer>
    <h2 id="fn-label" class="sr-only">Footnotes</h2>
    <ol>
        <li id="fn-1">
            The citation details go here.
            <a href="#fnref-1" aria-label="Back to content">↩</a>
        </li>
    </ol>
</footer>