- 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
A tester reviewing a music streaming app's playlist screen finds this: off-screen/hidden nav items remain tabbable (focus disappears into invisible regions).
Why it matters
Keyboard and screen-reader users who follow focus rather than the pointer. On a music streaming app's playlist screen, that means they get stuck and can't reach the control.
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
Remove hidden/off-screen items from the tab order (display:none, visibility:hidden, inert, or tabindex="-1" (code removing it from the Tab order)).
Outcome
With the fix in place on a music streaming app's playlist screen, they keep track of where they are on the page.
Who is affected
Keyboard and screen-reader users who follow focus rather than the pointer.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Tab Order That Jumps Around the Page Illogically
- Dialog That Opens Far From the Button That Triggered It
- Visual Layout Order That Doesn’t Match the Keyboard Tab Order
- Modal That Opens Without Moving Keyboard Focus Into It
- Modal That Closes Without Returning Focus to Its Trigger
- Expanded Content That Never Receives Keyboard Focus