Introduction

Consistent Navigation

March 22, 20267 min read

View contents

Introduction

When you use a website often, you build expectations about where things are. The logo sits top left, the main menu under the header, the search box on the right. If those elements move or change order one day, the experience turns frustrating. For a sighted person that is a minor annoyance; for someone using a screen reader or living with a cognitive disability, it can make the site unusable.

WCAG 2.2 addresses this directly in success criterion 3.2.3, Consistent Navigation, a Level AA requirement. This article covers what the criterion asks for, who it helps, the mistakes that break it most often, and which variations the standard actually allows.

What WCAG 3.2.3 requires

The criterion sets one clear rule: navigation mechanisms repeated across multiple pages within a site must appear in the same relative order every time they are presented, unless the user initiates the change.

The phrase "same relative order" is precise. It does not mean every page must carry exactly the same menu items — it means the items that do appear must keep their position relative to each other. If the home page shows Home, Products, About and Contact in that order, then on any other page where those links appear, Home must come before Products, Products before About, and so on.

The criterion allows three kinds of legitimate variation:

Adding items: A category page can include extra submenus without breaking consistency, as long as the main items keep their order.
Removing items: A page can hide menu items — based on user role, for instance — as long as the visible items keep their original relative order.
User-initiated changes: If the user turns on a personalisation option that reorders the menu, the change is acceptable because they asked for it explicitly.

Who benefits, and why

Consistent navigation helps everyone, but the impact is far larger for specific groups:

Screen reader users: A blind person navigating a site memorises the menu structure. "The third link is Services, the fourth is Contact." If the order changes between pages, that mental map is gone and the whole navigation has to be explored from scratch each time. Per W3C technique G61, keeping the order consistent lets these users build navigation strategies that hold for the length of the session.

People with cognitive disabilities: Predictability lowers cognitive load. When the interface behaves consistently, attention goes to the content instead of to learning a new layout on every page.

Keyboard users and people with motor disabilities: These users build muscle memory for tab order. If navigation moves, they have to recalculate how many Tab presses each destination takes, which raises both the effort and the chance of error.

Low-vision users: Screen magnifiers show only part of the viewport. If navigation holds its visual position, users know exactly where to move the view to find it.

Common mistakes that break consistency

The three patterns that violate WCAG 3.2.3 most often are dynamic reordering, shifting visual position, and differences between the mobile and desktop versions.

Analytics-driven reordering

Some sites reorder menu items by popularity. The logic sounds reasonable: "put what people visit most at the front." What it produces is an unpredictable menu that changes between visits, or even within the same session.

// Wrong: reorders by popularity
navigation.sort((a, b) =>
  popularPages.indexOf(b.url) - popularPages.indexOf(a.url)
);

// Right: fixed order defined in configuration
const navigation = [
  { label: 'Home', url: '/' },
  { label: 'Products', url: '/products' },
  { label: 'About', url: '/about' },
  { label: 'Contact', url: '/contact' }
];

Position changes between pages

A menu that sits in the header on the home page but moves to a sidebar on interior pages violates the spirit of the criterion. The link order may technically be identical, but the change of visual location disorients users who rely on spatial position to find navigation.

Mobile and desktop differences

The hamburger menu on mobile must contain exactly the same items in the same order as the desktop navigation. Changing the visual presentation is fine — a vertical dropdown instead of a horizontal bar — but the content and the sequence have to be identical.

Variations that are acceptable

Not every difference between pages is a violation. WCAG 3.2.3 explicitly allows these:

Additional contextual navigation: A products section can carry a secondary subcategory navigation, clearly separated with its own aria-label, without affecting the global main navigation.

Current page indicator: Visually highlighting the active page link with aria-current="page" and a CSS class is recommended and does not affect consistency, since it changes neither the order nor the position of items.

Expandable menus: Submenus that open under a parent item are acceptable because the main navigation keeps its order. The child items are revealed inside the existing structure.

Components that must stay consistent

Criterion 3.2.3 applies to every repeated navigation mechanism, not only the main menu:

Component	Consistency requirement
Main navigation	Same link order on every page
Utility navigation	Login, cart, help always in the same order
Footer links	Same order across the site
Search form	Same visual position on every page
Breadcrumbs	Consistent structure (the hierarchy varies by page)
Secondary navigation	Same order wherever it appears on multiple pages

How to verify consistency

The most effective check is manual and direct:

Open the home page and write down the exact order of the main navigation
Move to at least three different pages on the site
On each one, confirm the menu items appear in the same order
Confirm the navigation occupies the same visual position
Shrink the viewport to mobile size and repeat the checks against the hamburger menu

Pay particular attention to A/B tests that change navigation for different user segments, to navigation changes after login (adding items is fine, reordering is not), and to regional variations that could alter link order.

Frequently asked questions

No. It applies to any navigation mechanism repeated across multiple pages: main menu, secondary navigation, footer links, breadcrumbs, search forms and utility bars. Each of these must keep its relative order on every page where it appears.

Yes, as long as the items that stay visible keep their original relative order. If a signed-out user sees Home, Products and Contact, an administrator can see Home, Products, Admin, Contact. The Admin item is inserted, but Home still comes before Products, and Products still comes before Contact.

If the test changes the order of navigation items for a segment of users, it technically violates the criterion, because the user did not initiate the change. A/B tests that change visual styling without altering order are fine. For tests that need to change the menu structure, consider shipping them as personalisation options the user turns on explicitly.

What is the difference between 3.2.3 and 3.2.4?

WCAG 3.2.3 (Consistent Navigation) is about the order of navigation mechanisms. WCAG 3.2.4 (Consistent Identification) is about components with the same function carrying the same name. They complement each other: 3.2.3 keeps the menu in the same order, and 3.2.4 makes sure the search button is always called "Search" rather than "Search" on one page and "Find" on another.

Consistent Navigation Implementation Guide - Detailed code patterns
Skip Links Guide - Navigation accessibility
WCAG Compliance Hub - All accessibility checks

References

W3C - WCAG 2.2 SC 3.2.3 Consistent Navigation
W3C - G61 Presenting repeated components in the same order
WebAIM - Navigation
MDN - Navigation role

Related version

Detailed guide