---
trigger: always_on
related_: [reexamine_a11y, reexamine_process]
---

# Re-examine: Keyboard Efficiency

## Skip links
- First focusable element on page: `<a href="#main-content" class="sr-only focus:not-sr-only">Skip to main content</a>`
- Multiple skip links for complex layouts: "Skip to search", "Skip to results"
- Target element needs `tabindex="-1"` if it's not natively focusable

## Keyboard shortcuts
- Search: `Ctrl+K` or `/` to focus search input
- Escape: close modals, dropdowns, lightboxes, cancel operations
- Arrow keys: navigate within lists, carousels, tab bars
- Enter/Space: activate buttons and interactive cards
- Document shortcuts in a help overlay (accessible via `?` key)

## Tab order
- Logical reading order: left-to-right, top-to-bottom (matches visual layout)
- Never use `tabindex` > 0 — it breaks natural flow
- `tabindex="0"` only on custom interactive elements that need to be in tab order
- `tabindex="-1"` for programmatically focusable elements (skip link targets, error summaries)

## Focus traps
- Modals/dialogs: Tab wraps within the dialog (last → first → last)
- Escape key always closes the trap
- On close, return focus to the element that opened the modal
- `aria-modal="true"` + `role="dialog"` on the container

## Cards and list items
- If a card is clickable, the entire card should be a `<button>` or contain a primary `<a>`
- `Enter` and `Space` should both trigger the card action
- Keyboard hint on hover: consider showing "(Enter to open)" for non-obvious interactive elements
