Level AWCAG 2.2
2.4.3 Focus Order
Components receive focus in an order that preserves meaning and operability.
Why it matters
Keyboard users
When focus jumps unpredictably, users lose their place and operation becomes difficult.
Screen readers
For users operating by audio alone, a logical order is the entire map.
Cognitive disabilities
Predictable behavior reduces cognitive load and prevents operating errors for all users.
Motor impairments
When focus jumps, getting back requires extra actions. Users with limited movement want to work efficiently.
Live demo
Focus order
Tab Use the Tab key to move through the form and compare the focus order.
1
2
3
4
Tab order:
Email→Submit→Name→Phone Does not match the visual order
tabindex Giving tabindex a positive value (1 or greater) disrupts the focus order. Keep the DOM order aligned with the visual order so focus moves naturally.Understanding through personas
Sasaki (38) — Low vision / keyboard user
I see only a small portion of the screen with screen magnification. When Tab sends focus off-screen, I have to move the magnified region far and lose track of where I am.