Focus order follows logical reading sequence

Focus order that conflicts with visual reading order creates a disorienting experience where a keyboard user presses Tab and the cursor jumps from the page header to the sidebar, then back to main content, then to a footer element — with no visual logic connecting the sequence. WCAG 2.2 SC 2.4.3 (Focus Order) requires that focus order preserve meaning and operability. SC 1.3.2 (Meaningful Sequence) requires that the reading sequence be programmatically determinable. Section 508 2018 Refresh 502.3.5 covers information flow. The common failure pattern is a CSS flexbox or grid layout where order or flex-direction: row-reverse rearranges visual layout while the DOM order — which drives tab order — remains unchanged, causing Tab to skip backwards through the visual layout.

Match DOM order to visual order rather than using CSS order or positive tabindex to compensate for a mismatched DOM. Audit any component using flexbox order, flex-direction: row-reverse, or CSS grid grid-column that changes visual position.

// Bad: DOM order is First, Second but CSS reverses visually to Second, First
// Tab order reads: First → Second (but visually: Second → First)
<div style={{ display: 'flex', flexDirection: 'row-reverse' }}>
  <button>First (DOM) / Second (visual)</button>
  <button>Second (DOM) / First (visual)</button>
</div>

// Good: DOM order matches visual order
<div style={{ display: 'flex' }}>
  <button>Visually first, DOM first</button>
  <button>Visually second, DOM second</button>
</div>

// Bad: Positive tabindex creates artificial reordering
<button tabIndex={3}>Label A</button>
<button tabIndex={1}>Label B</button>
<button tabIndex={2}>Label C</button>
// Tab order: B → C → A (confusing)

// Good: No tabindex, let DOM order control tab order
<button>Label B</button>
<button>Label C</button>
<button>Label A</button>

Search for tabIndex greater than 0 and order: in CSS — both are signals of likely focus order problems.