WCAG 2.2 Demo SuiteConsistent Navigation
Navigational mechanisms repeated across multiple pages occur in the same relative order each time, unless the user changes it.
Who this affects
Users with cognitive disabilities who learn a layout by position. Screen magnifier users who know where to look. Screen reader users who learn how many Tab presses reach the search box.
The failure and the fix
Each example below is a self-contained page, loaded in a frame so its markup cannot affect this page. Open either one on its own to test it with a keyboard or screen reader.
Fails 3.2.3
Open the failing example in a new tab
fail.html — the problem
<h1>Three pages from the same site</h1>
<p>Like 3.2.6, this criterion cannot be judged from one page. Compare the
navigation across the set.</p>
<div class="pages">
<div class="mini">
<h2>Home</h2>
<nav aria-label="Page 1"><ul>
<li>Books</li><li>Events</li><li>Membership</li><li>Contact</li>
</ul></nav>
<p>Welcome.</p>
</div>
<!-- FAILURE 1: the same four items, reordered. A user who learned "Contact
is last" or "Events is the second Tab press" has to relearn the page. -->
<div class="mini">
<h2>Books</h2>
<nav aria-label="Page 2"><ul>
<li>Contact</li><li>Membership</li><li>Books</li><li>Events</li>
</ul></nav>
<p>Browse our shelves.</p>
</div>
<!-- FAILURE 2: reordered again, and the navigation has moved from the top of
the page to below the content. -->
<div class="mini">
<h2>Events</h2>
<p>What's on this month.</p>
<nav aria-label="Page 3"><ul>
<li>Membership</li><li>Events</li><li>Contact</li><li>Books</li>
</ul></nav>
</div>
</div>Meets 3.2.3
Open the passing example in a new tab
pass.html — the fix
<h1>Three pages from the same site</h1>
<div class="pages">
<!-- FIX: the same items in the same relative order, in the same position, on
every page. The current page is marked with aria-current, which gives
the user their location without changing the order. -->
<div class="mini">
<h2>Home</h2>
<nav aria-label="Page 1"><ul>
<li><span aria-current="page">Home</span></li><li>Books</li><li>Events</li>
<li>Membership</li><li>Contact</li>
</ul></nav>
<p>Welcome.</p>
</div>
<div class="mini">
<h2>Books</h2>
<nav aria-label="Page 2"><ul>
<li>Home</li><li><span aria-current="page">Books</span></li><li>Events</li>
<li>Membership</li><li>Contact</li>
</ul></nav>
<p>Browse our shelves.</p>
</div>
<div class="mini">
<h2>Events</h2>
<nav aria-label="Page 3"><ul>
<li>Home</li><li>Books</li><li><span aria-current="page">Events</span></li>
<li>Membership</li><li>Contact</li>
</ul></nav>
<p>What's on this month.</p>
</div>
</div>
<!-- The requirement is "same RELATIVE order", which is more permissive than it
sounds:
- you MAY add or remove items; the survivors must keep their sequence
- you MAY change the visual presentation responsively - a menu that
collapses into a disclosure button on narrow screens is fine, as long
as the order inside it is unchanged
- the user MAY reorder it themselves; personalisation is explicitly allowed
What you may not do is shuffle it from page to page. -->How to test it
Compare the navigation across several pages. The same items should appear in the same relative order. Items may be added or removed, but the surviving items must keep their sequence.
-
Automated
Requires comparing multiple pages against each other — outside the scope of a single-page scan.
No axe rule maps to this criterion. It has to be checked by a person.
-
Keyboard
Unplug the mouse. Move through the page with Tab, Shift+Tab, Enter, Space and the arrow keys. See the keyboard testing script.
-
Screen reader
Listen to both examples with NVDA, JAWS, VoiceOver or TalkBack and compare what is announced. See the screen reader cheat sheets.
-
Visual
Zoom to 200% and 400%, narrow the viewport to 320 px, and apply the text-spacing overrides. See the visual testing procedures.
Related criteria
In the specification
- Understanding 3.2.3 Consistent Navigation — the W3C explanation, intent and exceptions
- 3.2.3 in the WCAG 2.2 Recommendation — the normative wording