Navigation landmark

How to test a navigation landmark

Gherkin Condensed

Given that I am on a screen with a navigation landmark

1 Keyboard

WHEN I use the arrow keys to browse the navigation menu I SEE the screen scrolls through the page

2 Desktop screenreader

WHEN I use a desktop screenreader (NVDA, JAWS, VoiceOver) AND I use the arrow keys to browse the navigation menu
- I HEAR It indicates its role AND IF multiple navigations are present (ex: Main navigation, Site map, Breadcrumbs), the name of the navigation
- I HEAR It is discoverable with screenreader shortcuts as a navigation landmark

3 Mobile screenreader

WHEN I use a screenreader AND I swipe to elements in the navigation
- I HEAR It indicates its role AND IF multiple navigations are present (ex: Main navigation, Site map, Breadcrumbs), the name of the navigation
- I HEAR It is discoverable with screenreader shortcuts as a navigation landmark

1 Keyboard & screen reader actions

When I use	I see/hear
Skip-links	Focus moves directly to the nav element
Tab	Focus moves to links and buttons within the nav

2 Mobile screenreader gestures

When I use	I hear
Swipe	Focus moves within the nav
Doubletap	This typically activates most elements

3 Screenreader output

Reads	I hear
Name	It indicates its role and if multiple navigations are present (ex: main navigation, site map, breadcrumbs), the name of the navigation
Role	It is discoverable with screenreader shortcuts as a navigation landmark

Code examples

Use semantic HTML

This semantic HTML contains all accessibility features by default.

<nav id="nav-example" class="footer-example" tabindex="-1">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about/">About</a></li>
    <li><a href="/contact/">Contact</a></li>
    <li><button>Sign in</button></li>
  </ul>
</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>