SC 2.4.3 Level A WCAG 2.0

Focus Order

When users tab through a page, the focus order must follow a sequence that preserves meaning and operability — usually the visual reading order. A scrambled tab sequence is functionally broken even if every individual control works.

What it asks

A keyboard user pressing Tab should move through interactive elements in an order that lets them complete every task without losing context. In English-language LTR layouts that almost always means top-to-bottom, left-to-right. The order doesn’t have to be identical to the visual order, but any deviation must still preserve meaning — e.g. a “skip to footer” link can sit outside the main flow as long as the rest is sensible.

The failure mode this SC targets is dialogs that hide focus, drag-rearranged grids with stale tab order, and CSS that reorders content visually but leaves the DOM in its original sequence.

How to meet it

Build the DOM in reading order. If the visual layout differs, use CSS Grid or Flexbox order properties carefully — but the source order is what Tab follows.
When a modal opens, move focus into it and trap focus inside until it closes. When it closes, restore focus to the trigger.
Never use positive tabindex values (tabindex="3"). They create custom orders that fight the DOM and break the moment the page changes.
For drag-and-drop reorderable lists, update the DOM order to match the new visual order so the tab sequence stays in sync.
Test by pressing Tab from the address bar through every focusable element on the page. If you ever feel “lost,” users will too.

Common failures

Modal opens but focus stays on the page behind it. Tab cycles through hidden elements while the modal floats untouched.
Off-canvas mobile menu opens, focus stays in the page body. Screen-reader users can’t find what just appeared.
flex-direction: row-reverse flips the visual order; DOM order is unchanged; Tab now moves right-to-left while reading moves left-to-right.
Custom tabindex values scattered through a form, with later additions inheriting tabindex="0" and landing at the end.
Auto-focus on a “subscribe” popup that appears 8 seconds after load, yanking focus out from under whoever was reading.

Why it matters

Focus order is the keyboard equivalent of reading order. When it breaks, the experience isn’t slow — it’s incoherent. Users with motor disabilities who navigate exclusively with Tab and Shift+Tab can be sent to the wrong section of a form, miss a required field entirely, or lose their place in a long page after a single misplaced control.