a11y-keyboard-focuslisted

# 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`, `pos