2.4.3 Focus Order

Level A · added in WCAG 2.0

When users move through a page with Tab, focus must follow an order that preserves meaning and lets them operate it. The order does not have to be strictly left to right, but it must make sense.

Who it helps

Keyboard users, screen reader users and people with low vision or motor disabilities follow the focus order to understand and use a page. A jumbled order makes forms confusing and lets people miss content or controls.

How to meet it

Put elements in the HTML source in the order they should be read and used; the default Tab order follows the DOM.
Avoid positive tabindex values such as tabindex="1"; use 0 or -1 only.
Check CSS that changes visual order, such as flex order, row-reverse, grid placement and absolute positioning, against the Tab order.
Move focus into dialogs and menus when they open, and return it to the trigger when they close.
Insert new content, such as expanded sections or error messages, right after the control that revealed it.
Tab through every page forward and back and confirm the order matches the visual and logical flow.

Examples

Fails:Positive tabindex values send focus to Last name before First name

<form>
  <label for="first">First name</label>
  <input id="first" name="first" tabindex="2">
  <label for="last">Last name</label>
  <input id="last" name="last" tabindex="1">
  <button type="submit" tabindex="3">Save</button>
</form>

Fails:A sign-in panel is shown at the end of the page, but focus stays on the button

<button type="button" onclick="document.getElementById('signin').hidden = false">
  Sign in
</button>
<!-- ...rest of the page... -->
<div id="signin" hidden>
  <h2>Sign in</h2>
  <!-- form fields -->
</div>

Passes:No tabindex: focus follows the source order

<form>
  <label for="first">First name</label>
  <input id="first" name="first">
  <label for="last">Last name</label>
  <input id="last" name="last">
  <button type="submit">Save</button>
</form>

Passes:A modal dialog moves focus inside when it opens and back to the button when it closes

<button type="button" onclick="document.getElementById('signin').showModal()">
  Sign in
</button>
<dialog id="signin" aria-labelledby="signin-title">
  <h2 id="signin-title">Sign in</h2>
  <!-- form fields -->
  <button type="button" onclick="this.closest('dialog').close()">Close</button>
</dialog>

Can a scanner detect this?

axe-core has no rule that tests focus order against this criterion, because only a person can judge whether an order preserves meaning. Its best-practice check for positive tabindex points to one common cause. Tab through each page and compare the order with what you see.

No automated rule tests this criterion. Check it by hand.

Common mistakes

Using positive tabindex to patch the order of one section, which breaks the order for the whole page.
Reordering a layout with CSS for mobile or desktop so the Tab order jumps around the screen.
Opening a dialog or off-canvas menu without moving focus into it.
Closing a dialog and leaving focus at the top of the page instead of on the control that opened it.

Official W3C explanation of 2.4.3

Check your own page

See which automated WCAG checks your page fails, with the failing elements and how to fix them.

Reviewed November 2, 2026