3.2.3 Consistent Navigation

WCAG 2.2 · 3.2.3 AA Understandable

What it requires

Navigational mechanisms that are repeated on multiple pages within a set of pages must appear in the same relative order each time they appear, unless the user changes the order. This covers the main site navigation, search, breadcrumbs, skip links, footer link sets, and any other recurring way to move around the site.

The order is what matters, not the pixel position: items may shift position because of responsive layout or because some links are added or removed on a given page, but the relative sequence of the links that do repeat must stay constant. Predictable, stable navigation lets people build a reliable mental map of the site.

  • Blind and low-vision screen-reader users, who navigate by tab order and landmarks and rely on links staying in a learned, predictable sequence.
  • Low-vision and magnifier users, who see only a small slice of the page and re-find controls by their remembered position in the order.
  • People with cognitive and learning disabilities, for whom navigation that reshuffles between pages adds memory load and causes disorientation.
  • Keyboard-only users, who reach repeated controls in a consistent number of key presses when the order is stable.

How to detect it

Ways to check Consistent Navigation
Check How Catches
Manual comparison Open several pages and compare the main nav, footer, and breadcrumb link order side by side. Reordered or relocated menu items between pages.
Keyboard Tab through repeated regions on each page and confirm controls arrive in the same sequence. Inconsistent tab order in shared navigation.
Screen reader List landmarks and links on each page; verify the repeated nav reads in one order. Order changes that are invisible but break the mental model.
Zoom / reflow At 400% zoom, check the menu still keeps the same relative order, not just the same items. Responsive code that re-sorts links at breakpoints.
Automated tools Run axe or similar across pages. Largely not detectable automatically — this needs human cross-page review.

How to fix it

  1. Build navigation from a single shared source (template, include, or component) so every page renders the identical markup.
  2. Keep the link sequence fixed; never re-sort by relevance, recency, or page type.
  3. When a page omits a link, remove it in place — do not reorder the links that remain.
  4. Ensure responsive and breakpoint CSS reorders nothing; preserve source/DOM order.
  5. Re-test the repeated regions across several pages after any navigation change.

The same shared nav, in the same order, on every page:

<nav aria-label="Primary">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/learn/">Learn</a></li>
    <li><a href="/standards/">Standards</a></li>
    <li><a href="/about/">About</a></li>
  </ul>
</nav>

Copy-paste tests

Automated coverage

There is no fully automated axe-core rule for 3.2.3. Whether repeated navigation keeps the same relative order across pages cannot be machine-verified, so this criterion needs manual review using the console check and steps below.

Run this in the browser console

consistent-navigation-check.js 
// READ-ONLY: lists repeated nav link order so you can compare across pages.
document.querySelectorAll('nav[aria-label], header, footer').forEach(function (region) {
  var label = region.getAttribute('aria-label') || region.tagName.toLowerCase();
  var order = Array.from(region.querySelectorAll('a[href]')).map(function (a) {
    return (a.textContent || '').trim() + ' → ' + a.getAttribute('href');
  });
  if (order.length) {
    console.group('Nav region: ' + label);
    console.table(order);
    region.style.outline = '2px dashed magenta';
    console.groupEnd();
  }
});

What to check manually: open two or more pages and confirm the repeated links appear in the same relative order each time, and that 400% zoom or mobile breakpoints do not re-sort them — no script can confirm consistency across pages for you.