Level AWCAG 2.0

2.4.3 Focus Order

If a web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.

Last reviewed: September 9, 2026

Understanding 2.4.3

Keyboard and screen reader users move through interactive content one focus stop at a time, forming a mental model of the page in the order they encounter things. When the focus order jumps around in a way that doesn't match the visual or logical reading order, it becomes disorienting and can make multi-step tasks like forms or wizards impossible to complete correctly, since a field might be reached before or after the label or instructions that explain it.

How to Meet It

In most cases, the simplest solution is to let the DOM source order match the intended visual and logical reading order, and avoid using `tabindex` values greater than 0 to manually reorder focus. When content is visually repositioned with CSS (e.g. flexbox `order`, grid placement, or absolute positioning), verify the tab order still matches the visual order a sighted user perceives. For custom interactive widgets (menus, dialogs, tab panels), manage focus explicitly with `tabindex="0"` / `tabindex="-1"` and JavaScript so that opening a dialog, for example, moves focus into it and returns focus to a sensible place on close.

Code Examples

INCORRECT

<input type="text" tabindex="3" placeholder="City">
<input type="text" tabindex="1" placeholder="Name">
<input type="text" tabindex="2" placeholder="Email">

CORRECT

<input type="text" placeholder="Name">
<input type="text" placeholder="Email">
<input type="text" placeholder="City">

Frequently Asked Questions

Is it ever acceptable to use a positive tabindex value?

Almost never. Positive tabindex values create a separate, hard-to-maintain focus sequence that overrides source order, and as soon as any new focusable element is added anywhere on the page, the numbering breaks. Reordering the DOM to match the desired sequence, or using tabindex='0' combined with source order, is far more maintainable.

I used CSS to visually reorder cards in a grid. Do I need to do anything for focus order?

Yes, check it manually. CSS properties like flex/grid 'order' change the visual position of elements without changing their DOM order or tab order, so a sighted keyboard user can see focus jump to a visually unrelated location. Either avoid reordering focusable elements with CSS or reorder them in the DOM instead.

Related Success Criteria

2.4.1 Bypass Blocks 2.4.2 Page Titled 2.4.4 Link Purpose (In Context)2.4.5 Multiple Ways

Quick Facts

Criterion2.4.3
LevelA
IntroducedWCAG 2.0

Automate Compliance

AccessiSight automatically scans and identifies 2.4.3 issues in your codebase.

Try Scanner Free