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.

• ID: accessibility-basics.keyboard-focus.focus-order-logical

• Severity: medium

• What to look for: Enumerate every relevant item. Tab through the page and verify that focus order matches the visual reading order (left-to-right, top-to-bottom). Watch for focus jumping unexpectedly or positive tabindex values being used to reorder elements. Check for DOM order vs. CSS layout mismatches (e.g., flexbox order property without matching DOM order).

• Pass criteria: At least 1 of the following conditions is met. Tab order follows logical reading order across all pages. No positive tabindex is used. DOM order and visual order match.

• Fail criteria: Tab order jumps unexpectedly. Positive tabindex is used to reorder elements. CSS flexbox/grid order property is used without matching DOM order.

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

• Detail on fail: Describe the focus order issue. Example: "After tabbing through header navigation, focus jumps to sidebar instead of main content. Multiple positive tabindex values used to reorder elements."

• Remediation: Rely on DOM order for tab order. Reorder DOM if needed, not tabindex:

  {/* Good: DOM order matches visual order */}
  <div>
    <button>First</button>
    <button>Second</button>
    <button>Third</button>
  </div>
  
  {/* Avoid: Using tabindex to reorder */}
  <div>
    <button tabIndex={3}>First</button>
    <button tabIndex={2}>Second</button>
    <button tabIndex={1}>Third</button>
  </div>
  
  {/* Avoid: CSS order without matching DOM order */}
  <div className="flex">
    <button style={{ order: 3 }}>First</button>
    <button style={{ order: 2 }}>Second</button>
    <button style={{ order: 1 }}>Third</button>
  </div>