a11y-keyboard-focus

Keyboard Navigation and Focus Management

Skill type: Reference. This is teaching/pattern content — it explains keyboard contracts, focus management strategies, and focus-restoration patterns for modals/dialogs. It is not a scanner. Static review (/a11y-review) catches common keyboard/focus source patterns; runtime keyboard feel (Tab order making sense, focus indicator quality) requires browser testing.

Keyboard accessibility is non-negotiable for WCAG 2.1.1 (Keyboard) and required for motor-impaired users, power users, and assistive technology users. Every interactive element must be reachable and operable via keyboard alone.

---

Focus Fundamentals

What Receives Focus

By default, only natively focusable elements receive keyboard focus:

• <a href="..."> — links with valid href
• <button>, <input>, <select>, <textarea> — form controls
• <summary> — disclosure toggle
• Elements with tabindex="0" — explicitly focusable
• Elements with tabindex="-1" — programmatically focusable only (not via Tab)

tabindex values:

Value	Effect
0	Element enters natural Tab order at its DOM position
-1	Element is focusable via element.focus() but excluded from Tab order
> 0	Never use. Overrides natural order, causes confusing navigation

Tab Order = DOM Order

Focus follows the DOM order, not the visual layout. CSS reordering (flex-direction: row-reverse, order, grid-template-areas, position: absolute, float) creates a mismatch between what users see and where focus goes.

<!-- Visual order: B A — Tab order: A B (DOM order) -->
<div style="display:flex; flex-direction:row-reverse">
  <button>A</button>  <!-- Tab focuses A first -->
  <button>B</button>  <!-- Then B — opposite of visual order -->
</div>

Always verify DOM order matches visual reading order.

---

Focus Indicators (WCAG 2.4.7, 2.4.11)

The Rule: Never Remove Without Replacing

/* ❌ FORBIDDEN: Removes focus indicator for keyboard users */
* { outline: none; }
button:focus { outline: 0; }
.btn:focus { outline: none; }

/* ✅ CORRECT: Replace with high-visibility custom indicator */
button:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}