Header landmark - Web accessibility testing checklist

How to test a header landmark

Gherkin Condensed

Given that I am on a screen with a header landmark

1 Keyboard

WHEN I use the tab key to enter the web browser window I SEE focus is strongly visually indicated on interactive components

2 Desktop screenreader

WHEN I use a desktop screenreader (NVDA, JAWS, VoiceOver) AND I use the tab key to enter the web browser window
- I HEAR It is discoverable with screenreader shortcuts as header/banner landmark
- I HEAR It typically contains the name and primary navigation of the website

3 Mobile screenreader

WHEN I use a screenreader AND I swipe to focusable elements in the header
- I HEAR It is discoverable with screenreader shortcuts as header/banner landmark
- I HEAR It typically contains the name and primary navigation of the website

1 Keyboard & screen reader actions

When I use	I see/hear
Skip-links	Focus moves directly to the header or navigation
Tab	Nothing, header itself is not focusable

2 Mobile screenreader gestures

When I use	I hear
Swipe	Focus moves directly to the header or navigation
Doubletap	This typically activates most elements

3 Screenreader output

Reads	I hear
Role	It is discoverable with screenreader shortcuts as header/banner landmark
Group	It typically contains the name and primary navigation of the website

A header 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

General notes

There must only be a one singular header/banner element on the page.
Contains site title and typically the primary navigation.

Code examples

Use semantic HTML

This semantic HTML contains all accessibility features by default.

<header id="example-header">
  <a href="#nav-example">Skip to navigation</a>
  <a href="#">Not the navigation</a>
  <nav tabindex="-1" class="nav-example" id="nav-example">
    <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>
</header>

Skip to navigation Not the navigation

When you can’t use semantic HTML

This custom header requires extra attributes.

<div role="banner" tabindex="-1" id="example-header">
  <a href="/">Website name</a>
</div>

Developer notes

Name

Typically doesn’t have a name or description since there must be only one instance per page

Role

Identifies itself as a header or banner landmark
If a non-semantic element must be used (like a <div>) use role="banner" to make the element discoverable.

Group

Contains site title and typically the primary navigation.

Focus

Can be targeted with a skip link, but the skip link will typically will be labelled “skip to navigation”
Use tabindex="-1" to make the header targetable with a skip link.
The <header> itself isn’t focusable with the tab key

Web Header landmark