Accessibility finding
The Tab order does not follow the order on screen
Accessibility Warning Severity: Medium
Part of the audit Reading, focus and visual order disagree. Finding id: accessibility.focusOrder.
What it costs you
Keyboard users and screen reader users meet the page in an order that differs from what is on screen. They lose their place or fill in a form in the wrong sequence.
What to do
Worth checking with the keyboard; we assume the order on screen is the intended one. Put the elements in the markup in the order they are read.
What it checks
- Positive tab order values used
- Keyboard focus jumps across the page
- Order differs between desktop and mobile
How to fix it
Order the markup, not the tabindex
- If CSS moves a block (order, flex-direction reverse, absolute positioning), move it in the markup instead.
How to check: Recrawl, then press Tab through the page at desktop and at phone width and watch the focus.
Thresholds
| Name | Default | Meaning |
|---|---|---|
min_scanners | 2 | How many scanners must report a positive tabindex before it counts as a failure. |
max_upward_jump_px | 400 | Focus moving up the page by more than this many CSS pixels between two Tab presses is queued for review. |
How to verify by hand
A keyboard walk-through by a person.
What this relies on
The visual order is the intended one.