2.4.3 Focus Order

What does it mean?

Pressing Tab moves focus from one interactive element to the next. That order should match the logical order of the page: usually the visual reading order, and within a form the order in which fields belong together. If focus jumps around unpredictably, users lose track and may fill in the wrong fields.

The order does not have to be strictly top-left to bottom-right, but it must make sense. When a dialog or menu opens, focus should move into it; when it closes, focus should return to the element that opened it.

Who does it help?

• Keyboard users who need to predict where focus will go next
• Screen reader users, who experience the page in focus and DOM order
• Screen magnifier users who only see a small part of the page at once
• People with cognitive disabilities who are confused by unexpected jumps

Common failures

• Positive tabindex values (tabindex="1", "2" …) that force an order unlike the visual layout
• CSS (order, flex-direction: row-reverse, absolute positioning) that changes the visual order but not the DOM order
• A modal dialog that opens but leaves focus behind on the page underneath
• Content inserted at the end of the DOM but shown near the top, such as a dropdown or cookie banner

How we test it

• evidence Evidence: our scanner collects material such as screenshots, lists and measurements.

Test question: Does the tab order (numbered screenshot) follow a logical sequence?

A person decides every criterion. No criterion ever passes automatically.

How to fix it

<input id="city" tabindex="1">
<input id="name" tabindex="3">
<input id="street" tabindex="2">

<label for="name">Name</label>  <input id="name" autocomplete="name">
<label for="street">Street</label> <input id="street" autocomplete="street-address">
<label for="city">City</label>    <input id="city" autocomplete="address-level2">

Without positive tabindex values, focus follows the source order, which matches the visual order.

Practical tips

• Use only tabindex="0" (make focusable) and tabindex="-1" (focus by script); avoid positive values.
• When you reorder content with CSS for layout, check the tab order again.

Guides and patterns on this

• Getting there without a mouseMany people use the web without a mouse: with a keyboard, switches, voice control or a screen reader. Here is what has to work for them and how to manage focus properly in modern web apps.
• Cookie banners that lock no one outThe cookie banner is often the first thing visitors meet, and for some the last: if it cannot be used with a keyboard or screen reader, the site is closed to them. Here is how to get it right.
• TabsOne panel of several, arrow keys switch between tabs.
• Modal dialogFocus moves in on open, Escape closes, focus returns.

Official source

Understanding WCAG 2.2 at the W3C: 2.4.3 Focus Order