- Success Criterion 2.4.3
- Conformance level A
Focus Jumping to the Page Top on Every Route Change
2.4.3 — Focus Order
Scenario
Setting
An online marketplace's seller dashboard
What’s wrong
Focus jumping to top on every single-page app route change mid-task, or to arbitrary widgets on load.
Example
.field-3 { order: 1; } .field-1 { order: 3; } /* tab order scrambled by CSS */Why it matters
Keyboard and screen-reader users who follow focus rather than the pointer.
How to test
Navigate to a new route in a single-page app: check where focus lands — jumping to the page top or an arbitrary widget instead of the new content's heading fails.
How to fix
On route change, move focus predictably (to the new page's heading or main), not to the top or random widgets.
<!-- Reorder the actual DOM nodes to match the intended focus sequence -->Focus order should follow a sequence that preserves meaning, matching how the content is meant to be read.
Outcome
On an online marketplace's seller dashboard, this barrier is gone for keyboard and screen-reader users who follow focus rather than the pointer — they get the same result as anyone else here.
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