Skip to main content Skip to site Map

Design Navigation landmark

How to design a navigation landmark

WCAG Disabilities

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

2 Operable

More than one way is available to locate content - 2.4.5 AA

3 Understandable

Navigation items are repeated in the same order - 3.2.3 AA
Help, support or contact options are presented in the same order - 3.2.6 A

4 Robust

Name and role is documented 4.1.2 A
Meets criteria across platforms, devices and viewports 4.0.0 AA

A navigation landmark must work for people with disabilities:

Low vision

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

Cognitive

Help, support or contact options are presented in the same order - 3.2.6 A
More than one way is available to locate content - 2.4.5 AA

Blindness

Name and role is documented 4.1.2 A
Meets criteria across platforms, devices and viewports 4.0.0 AA

UX

The <nav> element wraps lists of links and buttons, giving context to people using a screen reader about the meaning of content inside.

Annotate the container as <nav> or role="navigation"
Each navigation landmark must have a name
- Main <nav> aria-label="main"
- Breadcrumbs <nav> aria-label="Breadcrumbs"
- Categories <nav> aria-label="Categories"
- Footer site map <nav> aria-label="Site map"

Related navigation landmark entries