- Success Criterion 3.2.3
- Conformance level AA
Utility Bar Icons Swapping Position Between Pages
3.2.3 — Consistent Navigation
Scenario
Setting
A streaming music app's search results
What’s wrong
Repeated utility bars (login/cart/language) swapping relative positions between pages.
Example
<!-- Home page utility bar -->
<div class="utility-bar"><a href="/login">Login</a><a href="/cart">Cart</a><a href="/lang">EN</a></div>
<!-- Search results utility bar -->
<div class="utility-bar"><a href="/lang">EN</a><a href="/login">Login</a><a href="/cart">Cart</a></div> Why it matters
A user who reaches for the rightmost icon expecting the language switcher on the home page finds Cart there instead on search results, and clicks the wrong control.
How to test
Compare repeated utility bars (login/cart/language selector) across pages: swapped relative positions between pages fails.
How to fix
Render the utility bar from a single shared partial so icon order stays fixed regardless of which page includes it.
<!-- Same order everywhere -->
<div class="utility-bar"><a href="/login">Login</a><a href="/cart">Cart</a><a href="/lang">EN</a></div> Outcome
A magnifier user finds the language icon in the same rightmost spot on every page.
Who is affected
Users with low vision using screen magnification, who see only a small slice of the utility bar at a time, rely on fixed positions to find each icon without scanning the whole row.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Navigation Links Appearing in a Different Order on Each Page
- Header Menu Items Reshuffled Differently on Different Sections
- Footer Link Groups Ordered Differently Across Page Templates
- Search Box That Moves to a Different Spot on Every Page
- Breadcrumbs Present on Some Pages but Missing on Others
- Skip Link Appearing in a Different Order on Different Pages