A Footnote on Footnotes: They Need to Be Accessible

What exactly are footnotes? 

Footnotes are notes that are placed at the end of a page and used to reference parts of the text (generally using superscript numbers). Writers use footnotes for several purposes, including citations, parenthetical information, outside sources, copyright permissions, background information, and more. ~ What Are Footnotes and How Do You Use Them?

How Do Footnotes Create Barriers for People with Disabilities?

Users with visual impairments, cognitive disabilities, and motor impairments may experience difficulties with traditional footnotes. For example:

Reading Order: 

• Footnotes can be separated from their references by long passages of text. This makes it difficult for readers to locate the footnote and return to their place in the main text.

Screen Reader Navigation: 

• Identifying Footnotes—Screen readers need clear ways to identify footnotes and distinguish them from the main content.
• Context Switching—Jumping between the main text and footnotes disrupts the flow and can be disorienting.
• Returning to the Main Text—Screen reader users need a reliable method for returning to their exact location in the main text.

Keyboard Navigation:

• Accessing Footnotes—Keyboard users need a way to easily navigate to and activate footnotes and return to the original text location on the page.

Cognitive Load:

• Information Overload—Footnotes interrupt the reading flow and can hinder information processing, especially for those with cognitive disabilities.
• Visual Clutter—Footnotes can create a visually overwhelming and cluttered page, particularly for users with visual or cognitive disabilities.

How Can You Make Footnotes More Accessible?

Accessible footnotes depend on proper semantic HTML structure to convey meaning to assistive technologies. ARIA attributes can enhance the HTML structure by providing extra context and instructions. If JavaScript is used to manage footnote interactions, make sure it doesn't create barriers for users with disabilities. For a deeper dive on footnotes using ARIA and in PDFs, please read Accessible Footnotes: Tags, Roles and Navigation.

Here are some guidelines to help get you started.

• • Clear Visual and Programmatic Cues: Use clear visual indicators and appropriate HTML elements:

    • Use the '
    • Use the '
    • Use the '' element with appropriate 'href' and 'id' attributes to link the footnote reference to its corresponding content.
    • Use 'aria-describedby' to provide descriptive labels. (see Accessible Footnotes with CSS - Making it Accessible)

  • Intuitive Navigation: 

    • Mouse Navigation
      • Create Anchor or Jump Links - One of the easiest ways to ensure your users can move smoothly between footnote references, the actual footnote, and back to the original text is to create anchor links. They’re not called "jump links" for nothing. 😉
        Clicking the marker in the text should smoothly jump the user’s view to the footnote at the bottom, and clicking the footnote number at the bottom should jump the user back to the corresponding place in the main text.
        This same technique applies to keyboard-only navigation.
      • Visual Cues - Provide clear, visual feedback on hover (e.g., underline or color change) to indicate that the footnote marker is clickable. Make sure to use proper color contrast as well.
    • Keyboard Navigation
      • Create Anchor or Jump Links (see above)
      • Tab Order - Ensure that the footnote markers are included in the document's natural tab order so users can navigate to them with the Tab key.
      • Arrow Key Navigation - Within the footnote section, allow users to navigate between footnotes using the up and down arrow keys.

  • Visual Considerations:

    • Avoid using color alone to convey meaning.
    • Use sufficient color contrast between the footnote link and the surrounding text.
    • Use accessible fonts that are easy to read and understand.
    • Use clear and concise language, avoiding jargon or technical terms.
    • Provide alternative text descriptions for any images or symbols used in footnotes. Ensure that the alternative text accurately conveys the meaning or purpose of the visual element. 

Creating accessible footnotes might seem like a small detail, but it significantly impacts inclusivity. Following these guidelines ensures that everyone can fully engage with your content regardless of their abilities. So, implement these guidelines, and your readers will appreciate them, and they will appreciate you!

For guidance on creating footnotes in PDFs and the proper use of ARIA roles, please read Accessible Footnotes: Tags, Roles and Navigation.

Resources

• Accessible Footnotes with CSS
• Accessibility changes: notes for developers
• Making References and Footnotes Accessible
• How to Create Accessible Footnotes
• What Are Footnotes and How Do You Use Them?
• Accessible Footnotes: Tags, Roles and Navigation