- Success Criterion 2.4.3
- Conformance level A
Visual Layout Order That Doesn’t Match the Keyboard Tab Order
2.4.3 — Focus Order
Scenario
Setting
A nonprofit's donation form
What’s wrong
Visual layout (CSS order/grid) diverges from page code (DOM) so Tab jumps around the page illogically.
Example
A nonprofit's donation form is a good example: visual layout (CSS order/grid) diverges from page code (DOM) so Tab jumps around the page illogically.
Why it matters
Keyboard and screen-reader users who follow focus rather than the pointer. On a nonprofit's donation form specifically, they get stuck and can't reach the control.
How to test
Compare visual layout order to DOM order (View Source or DevTools): if CSS order/grid-placement reorders content visually without matching DOM order, Tab jumps around illogically.
How to fix
Keep DOM order aligned with visual order (or manage tabindex (keyboard-focus setting) deliberately) so Tab follows the layout.
Outcome
Fixed, a visitor to a nonprofit's donation form 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
- 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
- Hidden Navigation Items That Are Still Reachable by Tab