WCAG 3.2.3 Consistent Navigation: Keep Nav Order the Same

What This Criterion Requires

WCAG 3.2.3 requires that navigational mechanisms that are repeated on multiple web pages within a set of web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user. This means the primary navigation menu, secondary navigation, breadcrumbs, search forms, and other repeated navigational components should appear in the same position and the same order on every page. If the main navigation lists Home, Products, About, and Contact on one page, it must use the same order on all other pages. New items can be added to the navigation (for example, a sub-section might have additional local navigation), but the existing items must maintain their relative order. This criterion does not prohibit changes to navigation that the user initiates, such as customizing a dashboard layout or collapsing navigation sections. The consistency requirement helps users learn the navigation structure once and apply that knowledge across all pages of the site.

Why It Matters

Consistent navigation is critical for users with cognitive disabilities who rely on learning and remembering the location of navigation elements. When navigation appears in different places or in a different order on different pages, these users must relearn the navigation on every page, which is cognitively exhausting and disorienting. Screen reader users who navigate by landmarks and headings learn the structure of a site and expect to find navigation in the same position. If the search box moves from the header to the sidebar on different pages, a screen reader user wastes significant time searching for it. Users with low vision who use screen magnification may only see a portion of the page and depend on consistent placement to find navigation controls. Consistent navigation also benefits all users by reducing cognitive load and creating a predictable, learnable interface. Inconsistent navigation is a common source of user frustration and abandonment, particularly for users with disabilities who expend more effort navigating websites.

Common Failures and How to Fix Them

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

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

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

<!-- Products page - same order, with sub-nav added -->
<nav aria-label="Main navigation">
  <a href="/">Home</a>
  <a href="/products" aria-current="page">Products</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</nav>
<nav aria-label="Product categories">
  <a href="/products/widgets">Widgets</a>
  <a href="/products/gadgets">Gadgets</a>
</nav>

<!-- Page 1: Search in header -->
<header>
  <nav>...</nav>
  <form role="search">...</form>
</header>

<!-- Page 2: Search moved to sidebar -->
<header>
  <nav>...</nav>
</header>
<aside>
  <form role="search">...</form>
</aside>

<!-- All pages: Search consistently in header -->
<header>
  <nav aria-label="Main navigation">...</nav>
  <form role="search" action="/search">
    <label for="search" class="visually-hidden">Search</label>
    <input type="search" id="search" name="q">
    <button type="submit">Search</button>
  </form>
</header>

How to Test

1. Navigate to several different pages within the site and compare the order and position of the main navigation links, verifying they are identical on each page.
2. Check that secondary navigation elements (breadcrumbs, utility navigation, search) appear in the same position on every page.
3. Verify that footer navigation links maintain the same order across all pages.
4. Confirm that any differences in navigation between pages are limited to additions (like local sub-navigation) rather than reordering of existing items.

CMS-Specific Guidance

This criterion commonly causes issues on these platforms:

• Wordpress Accessibility Checklist
• Shopify Accessibility Checklist
• Squarespace Accessibility Checklist
• Wix Accessibility Checklist
• Webflow Accessibility Checklist
• Drupal Accessibility Checklist

Further Reading

• Wcag Explained Plain English
• Keyboard Navigation Testing

Related WCAG Criteria

• WCAG 3.2.4
• WCAG 2.4.1
• WCAG 2.4.5