• 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

Related scenarios