• Success Criterion 3.2.3
  • Conformance level AA
  • W3C reference F66

Navigation Links Appearing in a Different Order on Each Page

3.2.3 — Consistent Navigation

Scenario

Setting

A food delivery app's restaurant menu

What’s wrong

Navigation links appear in a different order on different pages — users who memorize the layout keep getting lost.

Example 

<!-- Home page nav -->
<nav><a href="/browse">Browse</a><a href="/orders">Orders</a><a href="/account">Account</a></nav>

<!-- Restaurant menu page nav -->
<nav><a href="/account">Account</a><a href="/browse">Browse</a><a href="/orders">Orders</a></nav>

Why it matters

A user who memorized that Browse comes first on the home screen finds Account first on the restaurant page instead, so tabbing by muscle memory stops working.

How to test

Compare the header/nav/footer order across at least 3-4 different pages in the same section: items should appear in the same relative order everywhere.

How to fix

Keep the repeated navigation's link order identical across every page in the set, even when a page wants to emphasize something different.

<!-- Same order on every page -->
<nav><a href="/browse">Browse</a><a href="/orders">Orders</a><a href="/account">Account</a></nav>

Outcome

A user jumps straight to Orders from any page, in the same number of tab presses every time.

Who is affected

Screen reader users who navigate by link order, and users with cognitive disabilities who rely on spatial memory, both lose their bearings between pages.

Learn more

Related scenarios