Keyboard Navigation
Focus Order
- Follows visual reading order (top-left to bottom-right in LTR)
- Skip links at the top: "Skip to main content"
- Tab moves forward, Shift+Tab moves backward
- No keyboard traps (user can always Tab away, except modals)
- Focus returns to trigger after modal/dialog close
Focus Indicators
:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
- Always visible, never
outline: nonewithout replacement - High contrast against background
- Consistent style across all elements
Component Keyboard Patterns
| Component | Keys |
|---|---|
| Button | Enter/Space to activate |
| Link | Enter to follow |
| Tab panel | Arrow keys between tabs, Tab into content |
| Menu | Arrow keys to navigate, Enter to select, Escape to close |
| Modal | Escape to close, Tab cycles within |
| Combobox | Arrow keys, Enter to select, Escape to close |
| Slider | Arrow keys to adjust value |