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.