Focus order is logical and predictable

An illogical focus order — caused by positive tabindex values or CSS positioning that diverges from DOM order — means keyboard users encounter page elements in a sequence that does not match the visual reading order. WCAG 2.2 SC 2.4.3 (Focus Order) is a Level AA requirement. When a user tabs from the footer back to the header before reaching the main content, the interaction model breaks down and tasks become impossible to complete predictably.

Rely on natural DOM order for focus sequence. Remove all positive tabindex values and fix any CSS positioning that creates a mismatch between visual and DOM order.

// Bad — positive tabindex overrides DOM order unpredictably
<button tabIndex={2}>Third visually, first in DOM</button>
<button tabIndex={1}>First visually, second in DOM</button>

// Good — DOM order matches visual order, no tabindex needed
<nav>...</nav>
<main>
  <h1>...</h1>
  <form>...</form>
</main>
<footer>...</footer>

Use tabindex="0" only to add a non-interactive element to the tab order. Use tabindex="-1" to remove an element from natural order (for programmatic focus management). Search for any tabIndex value greater than 0 in your codebase — each is a likely focus order bug.

• ID: accessibility-wcag.operable.focus-order

• Severity: medium

• What to look for: Enumerate every relevant item. Keyboard-navigate through the page using Tab. Verify that focus moves in a logical, predictable order (top to bottom, left to right for left-to-right languages). Check for positive tabindex values (e.g., tabindex="1") which can disrupt natural tab order. Distinguish between (a) having no keyboard-accessible elements at all (a keyboard-accessible check issue, not a focus ORDER issue) and (b) having keyboard-accessible elements in an illogical tab sequence.

• Pass criteria: At least 1 of the following conditions is met. Tab order is logical and matches the visual reading order. No positive tabindex values used (or used only as exceptions with justification). Applications where no elements have focus and the natural DOM order is maintained in source code pass this check (focus order cannot be illogical when following DOM order).

• Fail criteria: Tab order jumps around illogically, or positive tabindex values create an unpredictable order, or CSS absolute/fixed positioning creates visual order that doesn't match DOM order.

• Skip (N/A) when: Never — focus order applies to all pages with content.

• Note: If keyboard-accessibility is absent (all divs with no tabindex), focus order is not disordered — it is absent. Mark as pass for focus-order if the DOM order is sequential, and mark keyboard-accessible as fail separately.

• Detail on fail: Example: "Tab order: button in header → footer link → form in main content. Order does not match visual layout. Positive tabindex='2' on submit button disrupts natural order"

• Remediation: Use the natural DOM order and avoid positive tabindex:

  // Good: natural DOM order
  <button>First</button>
  <button>Second</button>
  <button>Third</button>
  
  // Avoid
  <button tabIndex="3">First (tabindex=3)</button>
  <button tabIndex="1">Second (tabindex=1)</button>
  <button tabIndex="2">Third (tabindex=2)</button>
  

  If you need to manage focus, use tabindex="0" or -1 to remove/restore from tab order.