• Success Criterion 2.4.3
  • Conformance level A

Hidden Navigation Items That Are Still Reachable by Tab

2.4.3 — Focus Order

Scenario

Setting

A music streaming app's playlist screen

What’s wrong

Off-screen/hidden nav items remain tabbable (focus disappears into invisible regions).

Example 

.mobile-nav { transform: translateX(-100%); }
.mobile-nav.open { transform: translateX(0); }
<!-- links inside stay focusable even while pushed off-screen -->

Why it matters

A keyboard user tabbing through the playlist screen suddenly lands on invisible nav links pushed off-screen, with no visual cue where focus went.

How to test

Tab through the page and count stops: if off-screen or visually hidden nav items still receive focus, they create confusing 'invisible' stops.

How to fix

A transform alone doesn't remove an element from the tab order; pair it with visibility or inert.

.mobile-nav { transform: translateX(-100%); visibility: hidden; }
.mobile-nav.open { transform: translateX(0); visibility: visible; }

Outcome

A listener tabs through only the visible playlist controls, with the closed menu skipped entirely.

Who is affected

Keyboard users lose track of focus when it jumps to menu items that exist but aren't visible on screen.

Learn more

Related scenarios