Accessibility pattern · Disclosure and content

Footnotes

Each reference is a real link named Footnote 1, Footnote 2, and each note links back to the exact place it was cited from. Focus follows every jump, so the next Tab, and a screen reader, carry on from where the reader landed.

WCAG criteria
5
Keyboard rules
3
Checked with
axe, keyboard and the inspector
Try it Copy the code All patterns

Live demo

Try it

Use it with a mouse, a keyboard or a screen reader. The inspector beside it shows what the browser tells assistive technology as you go: focus, state changes and announcements.

Why body text needs 4.5:1

Body text on the web needs a contrast ratio of at least 4.5:1 against its background.1 That figure starts from 3:1, the minimum older display standards set for people with typical vision.2

It is then raised by half again, for the contrast lost with vision of about 20/40, which is typical by around age 80.3 Large text, 18 points or 14 points in bold, is easier to read, so it passes at 3:1.

Notes

  1. Success criterion 1.4.3 of WCAG 2.0, a W3C Recommendation since 11 December 2008. WCAG 2.2 keeps the same figure.

    Back

  2. ISO 9241-3 and ANSI/HFES 100-1988 both use 3:1 for text, as Understanding Success Criterion 1.4.3 explains.

    Back

  3. Vision of 20/40 comes with about 1.5 times less contrast sensitivity, and 3 × 1.5 = 4.5. Same source as note 2.

    Back

The demo works without JavaScript only as far as its HTML does; the inspector needs JavaScript.

Keyboard

Keys it answers to

Every action works without a pointer.

KeyWhat it does
TabMoves through the references in reading order, then through the Back links in the notes.
EnterOn a reference, jumps to its note and moves focus there; the note is highlighted.
EnterOn a Back link, returns to the reference it came from and moves focus onto it.

Screen readers

What it announces

Written from the roles, names and states in the markup.

WhenExpected announcement
Focus reaches a referenceFootnote 1, link
Enter follows itList item. Success criterion 1.4.3 of WCAG 2.0, a W3C Recommendation since 11 December 2008… Back to reference 1
Focus reaches a Back linkBack to reference 1, link
Enter follows itFootnote 1, link (focus is back in the text)

These are expected announcements, not recordings. Wording and order differ between screen readers and browsers.

Code

Copy the code

The exact files this demo runs on. The styles are served with a prefix that keeps this site's own styles out of the demo; what you copy is the original.

The markup

<article class="ap-footnotes" data-ap-footnotes>
  <h3 class="ap-footnotes__name">Why body text needs 4.5:1</h3>
  <div class="ap-footnotes__body">
    <p>Body text on the web needs a contrast ratio of at least 4.5:1 against its background.<sup class="ap-footnotes__sup"><a class="ap-footnotes__ref" id="fn-ref-1" href="#fn-note-1" aria-label="Footnote 1">1</a></sup> That figure starts from 3:1, the minimum older display standards set for people with typical vision.<sup class="ap-footnotes__sup"><a class="ap-footnotes__ref" id="fn-ref-2" href="#fn-note-2" aria-label="Footnote 2">2</a></sup></p>
    <p>It is then raised by half again, for the contrast lost with vision of about 20/40, which is typical by around age 80.<sup class="ap-footnotes__sup"><a class="ap-footnotes__ref" id="fn-ref-3" href="#fn-note-3" aria-label="Footnote 3">3</a></sup> Large text, 18 points or 14 points in bold, is easier to read, so it passes at 3:1.</p>
  </div>

  <footer class="ap-footnotes__foot">
    <h4 class="ap-footnotes__label">Notes</h4>
    <ol class="ap-footnotes__list" role="list">
      <li class="ap-footnotes__note" id="fn-note-1" tabindex="-1">
        <p>Success criterion 1.4.3 of <cite>WCAG 2.0</cite>, a W3C Recommendation since 11 December 2008. WCAG 2.2 keeps the same figure.</p>
        <a class="ap-footnotes__back" href="#fn-ref-1" aria-label="Back to reference 1"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 14 4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 0 11H11"/></svg>Back</a>
      </li>
      <li class="ap-footnotes__note" id="fn-note-2" tabindex="-1">
        <p>ISO 9241-3 and ANSI/HFES 100-1988 both use 3:1 for text, as <cite>Understanding Success Criterion 1.4.3</cite> explains.</p>
        <a class="ap-footnotes__back" href="#fn-ref-2" aria-label="Back to reference 2"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 14 4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 0 11H11"/></svg>Back</a>
      </li>
      <li class="ap-footnotes__note" id="fn-note-3" tabindex="-1">
        <p>Vision of 20/40 comes with about 1.5 times less contrast sensitivity, and 3&nbsp;×&nbsp;1.5&nbsp;=&nbsp;4.5. Same source as note 2.</p>
        <a class="ap-footnotes__back" href="#fn-ref-3" aria-label="Back to reference 3"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 14 4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 0 11H11"/></svg>Back</a>
      </li>
    </ol>
  </footer>
</article>

WCAG 2.2

What it meets

The success criteria this pattern takes care of, and how.

  • 1.3.1 Info and Relationships Level A

    The notes are an ordered list in the article's footer under a Notes heading, so their order and their place in the article are part of the markup.

  • 2.1.1 Keyboard Level A

    Every reference and every Back link is an ordinary link, followed with Enter.

  • 2.4.3 Focus Order Level A

    Focus moves to the note after a reference is followed and back to the reference after Back, so the Tab order continues from where the reader is.

  • 2.4.4 Link Purpose (In Context) Level A

    A reference is named Footnote 1, not just 1, and each Back link names the reference it returns to.

  • 2.4.7 Focus Visible Level AA

    References, Back links and the focused note show a two-pixel focus ring; the target of a jump is highlighted as well.

Usage

When to use it

Use it

  • Sources, caveats and asides in long-form text, where the detail would interrupt the sentence.
  • Articles and reports that are read in full and cited, where a reader may want to check every claim.

Use something else

  • Information people need to act on: put it in the text, or in a callout beside it.
  • Definitions of terms: a glossary term explains in place without a round trip.
  • Short pages, where a link straight to the source is simpler than a note that holds one.

Common failures

How it usually goes wrong

  • A bare number as the link text

    A link announced as "1, link" means nothing in a list of links. aria-label names it Footnote 1, and the visible number is still part of the name.

  • Focus left behind

    Following an in-page link scrolls the page, but focus can stay on the link, so the next Tab jumps back up the article. Focus moves to the note here.

  • No way back

    Without a link back, readers have to scroll to find their place again. Each note returns to the exact reference it came from.

  • Every Back link with the same name

    Three links called Back are indistinguishable when listed. Each is named Back to reference and its number.

  • Numbers typed by hand into each note

    Hand-numbered notes drift when one is added. The ordered list counts them, so the note numbers always follow their order.

  • A target that disappears under a sticky header

    A jump that scrolls the note to the top of the screen can hide it under a fixed header. scroll-margin keeps a gap above every target.

Notes

Building it

  • The links work without the script: it only moves focus once the browser has followed the link, so :target, the address bar and the browser's Back button all keep working.
  • Each note has tabindex=-1 so it can take focus from the script without joining the Tab order.
  • role=list on the ordered list keeps its list semantics in Safari, which drops them from lists styled with list-style: none.
  • Superscript links sit inside a sentence, so WCAG's inline exception covers their size; the chip around each number still makes it easier to hit.
  • Number references in reading order. If a note is cited twice, give each reference its own id and the note one Back link per reference.

Sources: Understanding SC 2.4.4: Link Purpose (In Context) · HTML: the sub and sup elements · MDN: :target

Checked with axe in light and dark themes, at desktop and phone widths, and by keyboard. Not yet tested with every screen reader and browser pair. Report a correction

Related

  • Glossary term

    Technical terms in running text that open a short definition in place, backed by a full glossary with links both ways.

    7 WCAG criteria4 keyboard rules

  • Table of contents

    An "On this page" list that jumps to each section, moves focus there, and marks the section you are reading.

    7 WCAG criteria5 keyboard rules

  • Links that say where they go

    Links whose words say where they go: in text, to another site, to a download, and "Read more" made specific.

    7 WCAG criteria3 keyboard rules

  • Back to top

    A button that appears once you have scrolled down, takes you back to the top and puts focus on the first heading.

    6 WCAG criteria3 keyboard rules