How to Create Accessible Footnotes
Command Palette
Search for a command to run...
Comments
Join the discussionNo comments yet. Be the first to comment.
Search for a command to run...
No comments yet. Be the first to comment.
Footnotes have a long and storied history dating back to the Middle Ages. For hundreds of years, they have been a powerful tool for providing information that supplements and supports the main text. By providing an easy way to access source references or additional information, footnotes have withstood the test of time. As a modern example, my personal favorite use of footnotes can be found in the fantasy novels of the late Terry Pratchett, where they are used to provide world-building and character insights in the voice of a hilarious outside narrator.
Just as footnotes can be an incredible tool on paper, they can also do great work on a web page. Clicking on an inline footnote reference can lead readers directly to the supplemental information in the footnote. Once they're finished, it can also take them back to their previous position on the page.
This is easy enough to set up to work with a mouse, but we also want to make sure our lovely keyboard and assistive technology users can reap the benefits of footnotes just as easily.
There are some key factors of accessibility to keep in mind when coding up some footnotes:
Semantic structure: Using semantic structure provides meaningful and properly organized content that can be interpreted accurately by assistive technologies, allowing users with disabilities to navigate, comprehend, and interact with web pages effectively.
Keyboard accessibility: Making websites keyboard accessible ensures that folks who can't use a mouse or rely on alternative input methods can still navigate and interact with them, allowing for inclusive and barrier-free access.
Support for assistive technologies: Supporting assistive technologies like screen readers enables people with visual impairments or reading difficulties to access and comprehend web content by converting text and other visual elements into audible or tactile representations.
Let's take this one step at a time. Since we're focused on accessibility here, we'll work through the accessibility factors mentioned above.
Oftentimes, keyboard accessibility can be tackled entirely by using proper semantic HTML. This is one of those cases.
<p>
This is some example text supported by a footnote
<a id="footnote-1-link" href="#footnote-1">
<sup>[1]</sup>
</a>
.
</p>
<ol>
<li id="footnote-1">
Footnotes provide supportive information.
<a href="#footnote-1-link">↩</a>
</li>
</ol>
The link to the footnote (ex. "[1]") is contained by a <a> tag.
The <a> tag has a unique id attribute and an href attribute set to the id of the footnote it links to.
The <a> tag wraps a <sup> tag. You're probably wondering "What's <sup>, dog?" "Sup" is short for "superscript," meaning the text is small and raised to the top of the line height. This is the recommended presentation for footnote links, ideally consistent across the web.
The footnotes at the bottom of the page are contained in an <ol> tag since the order of the footnotes matters.
The <li> tag containing the footnote has a unique id attribute, matching the href attribute on the footnote link.
The footnote <li> tag contains a <a> tag that links back to the corresponding footnote link. The href attribute matches the id attribute of the footnote link. If multiple footnote links lead to the same footnote (like if one reference is used in multiple places on a page) JavaScript will be required to dynamically change the href attribute of the link in the footnote to take users back to where they came from.
Using semantic HTML already takes us pretty far when it comes to supporting assistive technologies like screen readers and refreshable braille displays. But we can do better by increasing the clarity of our footnote links and "back to content" links. The code example below is mostly the same, but there are a few important changes.
<p>
This is some example text supported by a footnote
<a id="footnote-1-link" href="#footnote-1">
<sup>[1] <span class="sr-only">Footnote details</span></sup>
</a>
.
</p>
<ol>
<li id="footnote-1">
Footnotes provide supportive information.
<a href="#footnote-1-link" aria-label="Back to content">↩</a>
</li>
</ol>
Add a <span> tag inside of the <sup> tag with a description of where the footnote link leads, such as "footnote details." This way, screen readers will read out more than just "one" for the link. Use CSS to hide this text visually but keep it on the page for screen readers and other assistive technologies.
In the above example, the "back to content" link in the footnote is displayed as an icon (↩). This isn't readable by screen readers and other assistive technologies, so we can give it a text alternative with the aria-label attribute.
Now we know how to make accessible footnotes! To summarize:
Use proper semantic HTML with tags like <a> and <sup>.
Use matching href and id attributes on footnote links and "back to content" links.
Improve the experience for folks using assistive technologies like screen readers by utilizing "screen reader only" CSS and the aria-label attribute.
For more information about accessible footnotes, check out the footnotes section of Hyah UI.
Have a question about how to implement any of the above steps? Or maybe you've caught something you think is missing or incorrect? If any of that sounds like you, comment down below so we can chat about it!