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 only

When I use the tab key to move focus to a control in the footer I SEE focus moves to the control (but the footer landmark itself does not receive focus)

2 Desktop screenreader

WHEN I use a desktop screenreader (NVDA, JAWS, VoiceOver) AND I use landmark shortcuts
- I HEAR it is discoverable as a contentinfo or footer landmark
- I HEAR it has no name, only a role because there should be only one
When I use the tab key to move focus to a control in the footer I HEAR focus moves to the control (but the footer landmark itself does not receive focus)

3 Mobile screenreader

WHEN I use a screenreader AND I use screen reader shortcuts
- I HEAR it is discoverable as a contentinfo or footer landmark
- I HEAR it has no name, only a role because there should be only one
Or when I swipe to move focus to a control in the footer I HEAR focus moves to the control (but the footer itself does not receive focus)

1 Keyboard & screen reader actions

When I use	I see/hear
Landmark shortcuts	It can be discovered, understood and skipped to
Tab	Focus moves to controls inside the landmark (but the landmark itself does not receive focus)

2 Mobile screenreader gestures

When I use	I hear
Landmark shortcuts	It can be discovered, understood and skipped to
Swipe	Focus moves to controls inside the landmark (but the landmark itself does not receive focus)

3 Screenreader output

Reads	I hear
Role	It is discoverable as a contentinfo or footer landmark
Name	It has no name, only a role because there should be only one

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>
  &copy; 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
</div>

Related footer landmark entries

Design criteria: Footer landmark

Web Footer landmark