- Success Criterion 2.4.3
- Conformance level A
Decorative Element Wrongly Given a Keyboard Tab Stop
2.4.3 — Focus Order
Scenario
Setting
A weather app's forecast screen
What’s wrong
Non-interactive text or decorative graphics given tabindex (keyboard-focus setting), inserting meaningless focus stops.
Example
A QA pass on a weather app's forecast screen turns this up: non-interactive text or decorative graphics given tabindex (keyboard-focus setting), inserting meaningless focus stops.
Why it matters
Keyboard and screen-reader users who follow focus rather than the pointer. The practical effect on a weather app's forecast screen: they lose track of where they are on the page.
How to test
Tab through the page: if non-interactive text or decorative graphics receive focus for no reason, it fails.
How to fix
Remove tabindex (keyboard-focus setting) from non-interactive text and decorative graphics.
Outcome
That one change on a weather app's forecast screen means they reach and operate the control without a mouse.
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