Focus Order: Logical Tab Order Explained (WCAG 2.4.3)

Focus order is the sequence in which links, buttons and form fields receive keyboard focus as someone presses Tab. When the focus order follows the logic of the page, keyboard users move through it the way everyone else reads it. When it jumps around, a simple form or menu becomes a puzzle.

What it means

WCAG 2.4.3 Focus Order is a Level A criterion of WCAG 2.2. It applies when a page can be navigated sequentially and the order affects meaning or operation. In that case, focusable components must receive focus in an order that preserves meaning and operability.

In HTML, the tab order (also called tabbing order) comes from the order of elements in the source code. Two things change it: positive tabindex values and scripts that move focus or insert content. W3C notes that more than one order can be correct – a table can be read row by row or column by column – and that the focus order does not have to match the visual layout pixel for pixel. It must not confuse people, though.

Who is affected: people who use keyboard navigation, screen reader users, people with switch devices and anyone who fills in forms with Tab instead of the mouse. If the order is wrong, they enter data in the wrong field, miss content or lose track of where they are.

Examples

A newsletter form where positive tabindex values send the cursor from the first name straight to a checkbox at the bottom:

<!-- Wrong: positive tabindex breaks the natural order -->
<input id="first" tabindex="1">
<input type="checkbox" id="news" tabindex="2">
<input id="last" tabindex="3">

<!-- Right: source order = reading order, no tabindex needed -->
<input id="first">
<input id="last">
<input type="checkbox" id="news">

A menu or dialog should be inserted in the DOM right after the button that opens it (technique SCR26), so the next Tab lands inside it. A modal dialog built with the HTML dialog element (H102) keeps focus inside while open.

How to check the focus order

Questions