2.4.3 Focus Order

WCAG 2.2 · 2.4.3 A Operable

What it requires

If a page can be navigated sequentially and that order affects meaning or operation, focusable components must receive focus in an order that preserves meaning and operability. In plain terms: when a user tabs through a page, the focus must move in a logical, predictable sequence that matches the visual reading order and the page's intent — so content and interactions still make sense and remain usable.

This is about the order focus moves, not its visibility. Focus order typically follows the order of elements in the DOM, so problems usually arise from reordering with CSS, positive tabindex values, or dialogs and menus that don't trap or place focus where the user expects.

  • Keyboard-only users — including people with motor disabilities — who rely on Tab/Shift+Tab and get lost when focus jumps unpredictably.
  • Screen reader users, who experience the page in focus/reading order; a scrambled order garbles the meaning.
  • Switch and assistive-technology users, for whom each focus step is effortful, so detours and dead-ends are costly.
  • Sighted users with cognitive or attention disabilities, who lose their place when the focus indicator leaps around the screen.

How to detect it

Ways to check focus order
Check How Catches
Keyboard walk-through Tab and Shift+Tab from the top; watch the visible focus indicator. Focus that jumps out of reading order, skips back, or enters hidden regions.
Visual vs. DOM order Compare on-screen layout with source order; inspect CSS order/positioning. Flex/grid reordering that desyncs visual and focus order.
Positive tabindex audit Search markup for tabindex values greater than 0. Forced sequences that override natural order.
Dialogs & menus Open each overlay; confirm focus moves in and returns to the trigger on close. Focus left behind page content or lost on dismiss.
Automated tools Run axe, WAVE, or Lighthouse. Limited: flags positive tabindex only. Logical order needs manual review.

How to fix it

  1. Order elements meaningfully in the DOM so the default focus sequence matches the reading order.
  2. Avoid CSS that reorders interactive content visually without matching the source order; if you must reorder, fix the DOM instead.
  3. Never use positive tabindex values. Use tabindex="0" to make a custom control focusable and tabindex="-1" only for programmatic focus.
  4. In dialogs and menus, move focus to the overlay on open, keep focus within it, and return focus to the triggering control on close.
  5. Re-test by tabbing through the whole page and confirming the order still makes sense.
<form>
  <label for="email">Email</label>
  <input id="email" type="email" name="email">

  <label for="pass">Password</label>
  <input id="pass" type="password" name="pass">

  <!-- DOM order = focus order = visual order; no tabindex needed -->
  <button type="submit">Sign in</button>
</form>

Copy-paste tests

Automated coverage

There is no fully automated axe-core rule for 2.4.3 Focus Order: a tool can flag positive tabindex, but it cannot judge whether the focus sequence preserves meaning. This criterion needs manual review using the console check and steps below.

Run this in the browser console

focus-order-audit.js 
// Read-only: surfaces suspect focus-order nodes for manual review.
const focusable = [...document.querySelectorAll(
  'a[href],button,input,select,textarea,[tabindex]'
)].filter(el => !el.disabled && el.tabIndex >= 0);

const positive = focusable.filter(el => el.tabIndex > 0);
console.log('Tab stops in DOM order:', focusable.length);
console.table(positive.map(el => ({
  tag: el.tagName, tabindex: el.tabIndex,
  text: (el.textContent || el.value || '').trim().slice(0, 40)
})));
positive.forEach(el => { el.style.outline = '3px solid orange'; });
console.log('Outlined', positive.length, 'elements with positive tabindex (review these).');

What to check manually: Tab from the top of the page and confirm focus moves in the same order you read visually (no jumps backward or into off-screen content); open each dialog or menu and verify focus enters it and returns to the trigger on close.