Tab order should follow the visual order

Rule focus-order · Component patterns (best practice) · impact moderate · Live only (static → incomplete)

↩ Back to the rules index · WCAG cross-reference

Why it matters#

When the Tab sequence jumps around the page instead of following the visual top-to-bottom order, keyboard users lose their place. The engine compares the real focus sequence to the rendered geometry and flags elements that receive focus well out of visual order.

How to fix#

Order interactive elements in the DOM to match their visual order, and avoid positive tabindex values that reorder the Tab sequence.

Example#

<div><a href="/2" tabindex="2">Second</a><a href="/1" tabindex="1">First</a></div>

<div><a href="/1">First</a><a href="/2">Second</a></div>

WCAG success criteria#

2.4.3 Focus Order — Level A#

Focus must move in an order that preserves meaning and operability.

Understanding 2.4.3

Standards#

This rule contributes to the following standards:

WCAG A EN 301 549 Best practice

References#

• WCAG — Focus Order