3.2.3 Consistent Navigation

Level: AA | Principle: Understandable | Since: WCAG 2.0 | Automation: Manual

What This Means

Navigation menus that appear on multiple pages within a site must appear in the same relative order each time. Users build a mental model of where things are — moving navigation items between pages breaks that model and forces users to re-learn the interface on every page.

Who This Affects

Screen reader users — they memorize the sequence of navigation links and rely on that order to move quickly through pages
Cognitive disability users — inconsistent navigation increases cognitive load and causes confusion
Low vision users — they use spatial memory to locate items; rearranging navigation defeats that strategy
Everyone — consistent navigation reduces the learning curve across a site

Common Pitfalls

1. Reordering navigation items between pages

<!-- Home page nav -->
<nav>
  <a href="/">Home</a>
  <a href="/products">Products</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</nav>

<!-- Bad: About page swaps order -->
<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/products">Products</a>
  <a href="/contact">Contact</a>
</nav>

2. Removing items from navigation on certain pages

<!-- Home page nav -->
<nav>
  <a href="/">Home</a>
  <a href="/products">Products</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</nav>

<!-- Bad: Products page drops "Home" link -->
<nav>
  <a href="/products">Products</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</nav>

3. Moving the search bar to different locations

<!-- Bad: search is in the header on the home page but in the sidebar on other pages -->

How to Fix

Use a shared navigation component

function MainNav() {
  return (
    <nav aria-label="Main">
      <a href="/">Home</a>
      <a href="/products">Products</a>
      <a href="/about">About</a>
      <a href="/contact">Contact</a>
    </nav>
  );
}

Adding items is acceptable — just preserve the existing order

<!-- Home page -->
<nav>
  <a href="/">Home</a>
  <a href="/products">Products</a>
  <a href="/contact">Contact</a>
</nav>

<!-- Products page — "Deals" added but existing order unchanged -->
<nav>
  <a href="/">Home</a>
  <a href="/products">Products</a>
  <a href="/products/deals">Deals</a>
  <a href="/contact">Contact</a>
</nav>

Highlight the current page without reordering

<nav aria-label="Main">
  <a href="/">Home</a>
  <a href="/products" aria-current="page">Products</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</nav>

How to Test

Visit at least 3-4 different pages on the site and compare the main navigation menu on each page.
Verify the navigation links appear in the same relative order on every page (no reordering, no removal of items).
Check that the search bar, if present, appears in the same location on every page.
Open a screen reader and navigate the main menu on multiple pages to confirm the link order is identical.
Pass: Navigation elements appear in the same relative order on every page, with no items reordered or removed.
Fail: Navigation items change order or disappear between pages.

axe-core Rules

This criterion cannot be detected by automated tools. It requires cross-page comparison that axe-core does not perform.