This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung
Accessibility
What does focus order mean on a website?
The focus order is the sequence in which the Tab key moves through a page's control elements. It must follow the visible arrangement: top to bottom, left to right. If focus instead jumps around every which way, keyboard users lose their orientation — they can't predict where the next keypress will land. WCAG criterion 2.4.3 requires a coherent order.
How an incorrect focus order comes about
The Tab key follows the order of elements in the source code — not what's visible on screen. If the design moves elements to different positions, the two orders diverge: focus jumps from the name field to the footer and back to the submit button. Dialog boxes added later often end up right at the end in the source code too — anyone wanting to tab into them first has to get through the rest of the entire page. A third classic case is fixed tab-index numbers in the source code that force their own order, colliding with the layout. All of this only becomes visible in an actual keyboard pass.
How the audit service measures the focus order
The audit service actually presses the Tab key on your page and logs the position of every stop. It then counts backward jumps: places where focus clearly jumps upward, or leftward within the same line, against the reading direction. If more than 30 percent of the focus changes are backward jumps, the criterion counts as violated; between 10 and 30 percent, the report notes a manual check case, since multi-column layouts can explain individual jumps. Below that, the order counts as coherent. The report states the number of backward jumps and the stops checked — you see the measurement basis, not just the verdict.
Examples
Focus jumps through tabindex
<input tabindex="3" name="name">
<input tabindex="1" name="email">
<button tabindex="2">Senden</button><input name="name">
<input name="email">
<button>Senden</button>Positive tabindex values create their own order that deviates from the visible one. The source text order is the correct one.
- Tab through your most important page and watch the highlight — does it follow the reading direction from top left to bottom right?
- Pay special attention to forms: the field order by keyboard must match the visible order.
- Ask your agency to avoid fixed tab-index numbers in the source code — the source-code order should be the visible order.
- Have dialog boxes move focus into the window when opening, and return it to its starting point when closing.
