- Success Criterion 2.4.3
- Conformance level A
One Control Creating Two Separate Keyboard Tab Stops
2.4.3 — Focus Order
Scenario
Setting
A ride-hailing app's trip booking screen
What’s wrong
One control generating multiple consecutive tab stops (anchor wrapping a button, duplicated tabindex (keyboard-focus setting)) so focus lands twice on the same element.
Example
Consider a ride-hailing app's trip booking screen: one control generating multiple consecutive tab stops (anchor wrapping a button, duplicated tabindex (keyboard-focus setting)) so focus lands twice on the same element.
Why it matters
Keyboard and screen-reader users who follow focus rather than the pointer. On a ride-hailing app's trip booking screen specifically, they get stuck and can't reach the control.
How to test
Tab through a single control (e.g., an anchor wrapping a button): if it produces two separate tab stops instead of one, it fails.
How to fix
Ensure each control is exactly one tab stop (no focusable wrappers around focusable children).
Outcome
Fixed, a visitor to a ride-hailing app's trip booking screen can complete the task using only the keyboard.
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