Skip to main content

Creating Accessible Footnotes Using role note

This is the first post of my new Astro blog.

Creating Accessible Footnotes Using role note

A11y.Cafe ~

Footnotes are a valuable way to provide additional information, references, or clarifications in documents and web content. However, ensuring these footnotes are accessible to all users, including those using screen readers, is crucial. Accessible footnotes help provide a seamless reading experience, ensuring that everyone can access the same information without barriers.

The Web Content Accessibility Guidelines (WCAG) 2.2, in conjunction with ARIA roles, offer comprehensive guidance on making web content accessible. This article explores how to use role="note" to create accessible footnotes, including best practices, WCAG conformance levels, and practical code examples.

WCAG Guidelines for Footnotes

WCAG Conformance Levels

WCAG defines three conformance levels:

  • Level A: Basic web accessibility features.
  • Level AA: Deals with the biggest and most common barriers for disabled users.
  • Level AAA: The highest and most complex level of web accessibility.

For accessible footnotes, aiming for at least Level AA is recommended.

Relevant WCAG Success Criteria

  • 1.3.1 Info and Relationships (Level A): Ensure information and relationships conveyed through presentation can be programmatically determined.
  • 2.4.1 Bypass Blocks (Level A): Ensuring users can bypass repetitive content.
  • 2.4.4 Link Purpose (In Context) (Level A): Each link’s purpose should be identifiable from the link text alone or context.
  • 3.2.2 On Input (Level A): No unexpected changes of context when user inputs are received.
  • 4.1.2 Name, Role, Value (Level A): Ensure that user interface components have accessible names and roles.

Implementing Footnotes with role="note"

How Screen Readers Handle Notes

  1. Announcement of Notes: When content is marked with role="note", screen readers typically announce it as a “note” to indicate that it provides additional, contextually relevant information. The exact announcement can vary depending on the screen reader.
  2. Navigation to Notes: Users can navigate to notes using keyboard shortcuts if the screen reader supports landmarks or roles. Providing clear navigation links to and from the note enhances usability.

Best Practices for Making Notes Accessible

  1. Descriptive Links: Ensure footnote links are descriptive, providing clear context.
  2. Provide Navigation Links: Include links that allow users to navigate back to the original reference point from the note.
  3. Screen Reader Testing: Regularly test footnotes with different screen readers to ensure they are correctly recognized and navigable.
  4. Consistent Markup: Use consistent HTML and ARIA markup across all notes. This helps screen readers interpret the content more reliably.

Example 1: Simple Footnote with role="note"

<p>This is a paragraph with a footnote.<sup id="footnote-1"><a href="#note1" aria-describedby="note1">1</a></sup></p>

<div id="note1" role="note">
  <p>1. This is the footnote text providing additional information.</p>
</div>

Explanation:

  • The sup element indicates a footnote reference.
  • The a element links to the footnote content with aria-describedby for screen reader context.
  • The div with role="note" wraps the footnote text, signaling to screen readers that it is a note.

Example 2: Advanced Footnote Navigation

<p>This is a paragraph with a footnote.<sup id="note-ref-1"><a href="#note-1" aria-describedby="note-desc-1">1</a></sup></p>

<footer>
  <div id="note-1" role="note">
    <p id="note-desc-1">1. Detailed footnote information.<a href="#note-ref-1" aria-label="Return to reference">↩</a></p>
  </div>
</footer>

Explanation:

  • The sup element with id="note-ref-1" marks the footnote reference.
  • The a element links to the footnote content and uses aria-describedby for additional context.
  • The div with role="note" wraps the footnote text, ensuring screen readers recognize it as supplementary information.
  • The footnote text includes a back link to the reference, providing easy navigation.

Sufficient Techniques and Failures

  • Technique G1: Adding a descriptive label to each footnote link.
  • Technique G123: Providing a means to bypass blocks of content.
  • Failure F54: Using text that does not provide information about the link’s destination or purpose.

Conclusion

Using role="note" for footnotes enhances accessibility by making them easily recognizable and navigable by screen readers. By following WCAG guidelines and best practices, you can ensure your footnotes provide the same value to all users, regardless of their abilities. Regular testing and adherence to best practices will further enhance the accessibility and usability of your web content.

References and Resources

Found an error, typo, or bug please edit on github or open an issue or ticket

Edit on Github Open an issue