Skip to main content
Understandable WCAG 3.2.3

3.2.3 Consistent Navigation

Navigational mechanisms that are repeated on multiple web pages within a set occur in the same relative order each time they are repeated.

Level AA Moderate WCAG 2.0 (new) WCAG 2.1 WCAG 2.2

What this rule means

WCAG 3.2.3 requires that navigation menus, search bars, and other repeated navigational elements appear in the same relative order across all pages of a site. The exact items may change (a section page may add subnav), but the order of shared items must remain consistent.

This applies to navigation bars, sidebars, breadcrumbs, footer links, and any other navigational mechanism. Consistency helps users build mental models of the site structure.

Why it matters

Users with cognitive disabilities and screen reader users rely on consistent placement to find navigation elements. If the main menu appears in a different order on different pages, users must re-learn the interface on each page.

Consistent navigation reduces cognitive load for all users and speeds up task completion. It is a fundamental principle of usable interface design.

Related axe-core rules

There are no automated axe-core rules for this criterion. Cross-page consistency must be verified through manual comparison.

How to test

  • Visit multiple pages across the site and compare the order of navigation elements.
  • Verify that shared navigation items (header menu, footer links, sidebar) maintain the same relative order.
  • Check both visual order and DOM order — they should match.
  • Test responsive layouts to ensure order is maintained at all breakpoints.

How to fix

  • Use shared templates or components for navigation across all pages.
  • Keep the relative order of navigation items consistent — items can be added between pages but existing items should not be reordered.
  • Ensure responsive designs maintain the same logical order even if layout changes (e.g., hamburger menu should have the same item order).
<!-- Consistent header across pages -->
<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/kb">Knowledge Base</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>
<!-- This same order should appear on every page -->

Common mistakes

  • Reordering navigation items on different page templates (e.g., marketing pages vs. documentation).
  • Using a different navigation order in the mobile hamburger menu than in the desktop nav.
  • Adding items to the middle of navigation on some pages, pushing existing items to different positions.

Resources