• Success Criterion 3.2.3
  • Conformance level AA

Mobile Navigation Order That’s Inconsistent With Itself

3.2.3 — Consistent Navigation

Scenario

Setting

A pharmacy app's prescription-refill form

What’s wrong

Mobile nav ordering diverging from itself across pages (not vs — desktop — across pages in the same presentation).

Example 

<!-- Mobile nav on refill form -->
<nav class="mobile-nav"><a href="/refills">Refills</a><a href="/pharmacy">Pharmacy</a><a href="/account">Account</a></nav>

<!-- Mobile nav on prescription history -->
<nav class="mobile-nav"><a href="/pharmacy">Pharmacy</a><a href="/account">Account</a><a href="/refills">Refills</a></nav>

Why it matters

On mobile, the same three tabs swap positions between the refill form and prescription history, so a patient's thumb lands on the wrong tab after switching screens.

How to test

Compare mobile navigation order to itself across different pages (not vs — desktop): inconsistency across pages in the same presentation fails.

How to fix

Build the mobile tab bar as one shared component so order can't drift between mobile views, independent of the desktop layout.

<!-- Same mobile nav order on every screen -->
<nav class="mobile-nav"><a href="/refills">Refills</a><a href="/pharmacy">Pharmacy</a><a href="/account">Account</a></nav>

Outcome

A patient's thumb lands on Refills in the same spot no matter which mobile screen they're on.

Who is affected

Mobile screen reader users swiping through the tab bar, and users with motor impairments relying on consistent tap targets, both get the wrong control at a familiar swipe position.

Learn more

Related scenarios