Navigation

In web accessibility, navigation groups all the mechanisms that allow users to move through a site: main menu, search engine, site map, breadcrumb trail. WCAG requires at least two of these systems on each set of pages, to cover the different ways users browse a site.

A screen reader user arrives on your page. Before reaching the first word of content, they navigate through the logo, menu links, submenu, social media icons. On some sites, this represents 40 to 50 tab presses. A link "Skip to main content" would have saved them all this navigation.

#More than a menu

The word "navigation" goes beyond the menu at the top of the page. The WCAG 2.4.5 criterion (level AA) requires at least two systems to locate a page within a site. RGAA dedicates its topic 12 to it and lists the accepted mechanisms: navigation menu, site map, search engine.

Each of these systems serves a different user profile. A sighted user clicks in the menu. A screen reader user jumps from landmark to landmark. A user with cognitive disabilities types a word in the search field.

In HTML, the <nav> tag automatically creates a navigation landmark for assistive technologies. When a page contains multiple navigation zones, each needs a distinct label:

<nav aria-label="Main menu">
  <ul>...</ul>
</nav>
<nav aria-label="Breadcrumb">
  <ol>...</ol>
</nav>

Without aria-label, the screen reader announces "navigation" twice. The user doesn't know which to choose.

The WCAG 2.4.1 criterion (level A) requires a mechanism to bypass repeated blocks. The standard solution: a skip link placed as the first focusable element, visible on focus.

<a href="#contenu" class="skip-link">
  Skip to main content
</a>

#The mistakes nobody fixes

The most frequent: a <div> instead of <nav>. The visual rendering is identical. Screen readers, however, detect no landmark.

Another trap: hiding the skip link with display: none. Keyboard users never reach it. Prefer off-screen positioning that resets on focus (position: absolute combined with :focus).

The WCAG 3.2.3 criterion requires that navigation elements appear in the same order on each page. A menu that reorganizes itself from page to page disorients users who rely on spatial memory.

#In summary

Use <nav> with a descriptive aria-label for each navigation zone. Add a skip link visible on focus. Provide at least two navigation systems on your site. Keep the same menu order everywhere.

Back to glossary
Share this article

Learn more

Navigation System

A navigation system is a mechanism that allows locating a page within a website: navigation menu, site map, or search engine. RGAA and WCAG require at least two of these systems on each set of web pages, to accommodate different information-seeking strategies.

Site Map

A site map is an HTML page that lists all the links on a website, organized by sections. It provides an overview of the site structure and serves as an alternative navigation method. Users who struggle to navigate through traditional menus find direct access to each page.

Skip links

Skip links are links placed at the very beginning of a page that allow keyboard users to jump directly to the main content without tabbing through the navigation menu. Hidden by default, they appear on keyboard focus. WCAG 2.4.1 (Level A) requires them on every page with repetitive blocks.