Understandable · Level AA · 3.2.3
Consistent Navigation
Navigation mechanisms that repeat across multiple pages of a site — main nav, search field, skip link — need to stay in the same relative order every time they appear, so someone can build a mental map of the page once and reuse it everywhere.
- Blind
- Low vision
- Cognitive
How to recognize it
Compare the layout of repeated navigation blocks across several pages of the same site: a main menu that lists Home, Products, About, Contact on one page but About, Home, Contact, Products on another is the failure this criterion targets, even if every link still works and goes to the right place. Blind users navigating sequentially by keyboard or by jumping between landmarks feel this hardest, since they can't just glance at the screen to relocate a moved item — they built an expectation of 'search is the fourth thing' and now it isn't. The same applies to a search field that's the last item on every page except one where it's suddenly first, or a skip link that's sometimes the very first focusable element and sometimes buried lower down.
How to fix it
Keep repeated navigation components — main menu, search, skip links, breadcrumbs — in the same relative order on every page they appear on. This doesn't mean rigid, item-for-item identical: a menu can gain a sub-navigation section when a parent item is active, and the criterion is still met as long as the original items stay in the same relative order relative to each other. A deliberate, user-initiated change is also fine — reordering a list of search results because the user chose to sort them isn't a violation, since the user asked for it. One documented exception: pages that form a distinct sub-process with their own template — a checkout flow that intentionally strips out the main site navigation — aren't required to match the navigation of the pages around them, since the whole point is that they're a functionally different set of pages.
Example
Avoid
<!-- homepage nav -->
<nav><a href="/">Home</a><a href="/products">Products</a><a href="/about">About</a><a href="/contact">Contact</a></nav>
<!-- products page nav, same links reordered -->
<nav><a href="/about">About</a><a href="/">Home</a><a href="/contact">Contact</a><a href="/products">Products</a></nav>Prefer
<!-- homepage nav -->
<nav><a href="/">Home</a><a href="/products">Products</a><a href="/about">About</a><a href="/contact">Contact</a></nav>
<!-- products page nav, same order, sub-items inserted -->
<nav><a href="/">Home</a><a href="/products">Products</a><a href="/products/new">New arrivals</a><a href="/products/sale">Sale</a><a href="/about">About</a><a href="/contact">Contact</a></nav>