Footnote

How to test a footnote

Gherkin Condensed

Given that I am on a page with a footnote

1 Keyboard for mobile & desktop

WHEN I use the tab key to move focus to a footnote link I SEE focus is strongly visually indicated
Then when I use the enter key to activate the link I SEE my focus moves directly to the targeted footnote

2 Desktop screenreader

WHEN I use a desktop screenreader (NVDA, JAWS, VoiceOver) AND I use the tab key to move focus to a footnote link
- I HEAR It describes its purpose
- I HEAR It identifies itself as a link
Then when I use the enter key to activate the link I HEAR my focus moves directly to the targeted footnote

3 Mobile screenreader

WHEN I use a mobile screenreader (Talkback, VoiceOver) AND I swipe to focus on a footnote link
- I HEAR It describes its purpose
- I HEAR It identifies itself as a link
Then when I doubletap with the link in focus I HEAR my focus moves directly to the targeted footnote

1 Keyboard & screen reader actions

When I use	I see/hear
Tab	Focus moves to the footnote link
Enter	Activates the link, focus/tabindex moves directly to the targeted element

2 Mobile screenreader gestures

When I use	I hear
Swipe	Focus moves to the footnote link
Doubletap	Activates the link, focus/tabindex moves directly to the targeted footnote

3 Screenreader output for all devices

Reads	I hear
Name	It describes its purpose
Role	It identifies itself as a link

Code examples

<p>
  People definitely read footnotes and find them helpful.
  <a class="footnote-link" id="ref-alpha-link" href="#ref-alpha">
    <sup>
      1
      <span class="hidden">Footnote details</span>
    </sup>
  </a>
</p>
<div class="vertical-spacer">
</div>
<p class="footnote" id="ref-alpha" tabindex="-1">
  1. That is not true. Nobody reads footnotes.
  <a href="#ref-alpha-link">Back to content</a>
</p>

People definitely read footnotes and find them helpful. ^{1
Footnote details}

1. That is not true. Nobody reads footnotes. Back to content

Alternate approach

Foonotes using a dedicated footnotes section