Footer landmark - Web accessibility testing checklist

How to test a footer landmark

Gherkin Condensed

Given that I am on a screen with a footer landmark

1 Keyboard

WHEN I use the tab key to move focus to a interactive element in the footer I SEE focus is strongly visually indicated

2 Desktop screenreader

WHEN I use a desktop screenreader (NVDA, JAWS, VoiceOver) AND I use the tab key to move focus to a interactive element in the footer
- I HEAR It is discoverable with screenreader shortcuts as a footer or contentinfo landmark
- I HEAR It typically contains copyright information, navigation links, and privacy statements.

3 Mobile screenreader

WHEN I use a screenreader AND I swipe to focusable elements in the footer
- I HEAR It is discoverable with screenreader shortcuts as a footer or contentinfo landmark
- I HEAR It typically contains copyright information, navigation links, and privacy statements.

1 Keyboard & screen reader actions

When I use	I see/hear
Skip-links	Focus moves directly to the footer
Tab	Links and buttons within the footer are focusable

2 Mobile screenreader gestures

When I use	I hear
Swipe	Focus moves within footer.
Doubletap	This typically activates most elements.

3 Screenreader output

Reads	I hear
Role	It is discoverable with screenreader shortcuts as a footer or contentinfo landmark
Group	It typically contains copyright information, navigation links, and privacy statements.

A footer landmark must meet WCAG principles:

1 Perceivable

Text can resize up to 200% with no loss of information - 1.4.4 AA
Text has a 4.5:1 minimum contrast ratio 1.4.3 AA

4 Robust

Conveys the correct name, role - 4.1.2 A
Meets criteria across platforms, devices and viewports 4.0.0 AA

Code examples

Use semantic HTML

This semantic HTML contains all accessibility features by default.

<a href="#example-footer">Skip to example footer</a>
<footer tabindex="-1" id="example-footer">
  <nav aria-label="Site map">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about/">About</a></li>
      <li><a href="/contact/">Contact</a></li>
    </ul>
  </nav>
  © 2021
</footer>

Skip to example footer

When you can’t use semantic HTML

This custom footer requires extra attributes.

<div role="contentinfo" tabindex="-1" id="example-footer">
  &copy; 2021 Site Name
</div>

Developer notes

Name

Typically doesn’t have a name

Role

Identifies itself as a footer or contentinfo landmark
If a non-semantic element must be used (like a <div>) use role="contentinfo".

Group

Typically contains copyright information, navigation links, and privacy statements.

Focus

Can be targeted with a skip link, but isn’t focusable with the tab key
Use tabindex="-1" to make the footer targetable with a skip link.

Related footer landmark entries

Design criteria: Footer landmark

Web Footer landmark