Navigation landmark - Web accessibility testing checklist

How to test a navigation landmark

Gherkin Condensed

Given that I am on a screen with a navigation landmark

1 Keyboard only

When I use the tab key to move focus to a control in the navigation I SEE focus moves to the control (but the navigation 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 navigation landmark
- I HEAR if there are multiple navigations present, its purpose is unique and clear
When I use the tab key to move focus to a control in the navigation I HEAR focus moves to the control (but the navigation 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 navigation landmark
- I HEAR if there are multiple navigations present, its purpose is unique and clear
Or when I swipe to move focus to a control in the navigation I HEAR focus moves to the control (but the navigation 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 navigation landmark
Name	If there are multiple navigations present, its purpose is unique and clear

Code examples

Use semantic HTML

This semantic HTML contains all accessibility features by default.

<nav id="nav-example" class="example-popover-list" tabindex="-1">
  <ol class="level-1">
    <li><a href="/">Home</a></li>
    <li><a href="/about/">About</a></li>
    <li><a href="/contact/">Contact</a></li>
    <li><button class="menu">Sign in</button></li>
  </ol>
</nav>

When there is more than one navigation element, each must have a name.

<nav id="nav" aria-label="Main">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about/">About</a></li>
    <li><a href="/contact/">Contact</a></li>
  </ul>
</nav>

<h2>Categories</h2>
<nav aria-label="Categories">
  <ul>
    <li><a href="/alpha/">Alpha</a></li>
    <li><a href="/bravo/">Bravo</a></li>
    <li><a href="/charlie/">Charlie</a></li>
  </ul>
</nav>

<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>
</footer>

When you can’t use semantic HTML

This custom navigation requires extra attributes.

<div role="navigation">
  <ul>
    <li><a href="/">Website name</a></li>
    <li><a href="/about/">About</a></li>
    <li><a href="/contact/">Contact</a></li>
  </ul>
</div>

Web Navigation landmark