Keyboard Navigation
键盘导航
Aliases:键盘导航键盘操作键盘可达tab 顺序不用鼠标操作keyboard nav
What is it
Make every feature operable by keyboard alone: Tab/Shift+Tab move focus in a sane order, composite widgets roam with arrow keys over a roving tabindex, Escape dismisses overlays and returns focus. The full focus discipline beyond the focus ring, codified in the ARIA APG.
Name disambiguation
The Tab key moves focus; Tabs is a component. Same English word, two completely different things — one is an input key, one is a UI element.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- Focus management inside composites — toolbars, menus, tab lists
- Overlays that need an open/close focus loop
- Any core flow that must be completable without a mouse
✕ When not to use
- Dragging non-interactive nodes into the tab order with tabindex="0"
- Making every item tabbable while arrows do not roam
- Escape closing an overlay and dropping focus at the top of body
Variants
Linear tab order
线性 Tab 序
DOM order is focus order — the page-level default
Roving tabindex
漫游 tabindex
One tabindex="0" inside the group, arrows move it
Escape dismiss
Escape 归还焦点
Closing an overlay returns focus to its trigger
Implementation
tabindex:focus-visiblekeydownPage level: natural DOM order with native interactive elements — never positive tabindex. Composites per APG: one tabindex="0" in the group, -1 elsewhere; keydown handles arrows/Home/End and focuses the target item. On open, move focus into the overlay; Escape closes and restores the trigger. Only preventDefault a key once you know the widget owns it.
Platform API
tabindexkeydown:focus-visibleIn code
The exact names this thing goes by in each ecosystem — use the row that matches your project.
| Framework | Name |
|---|---|
| WAI-ARIA APG | Keyboard Interaction |
| WCAG | 2.4.3 Focus Order |
Related concepts
A visible outline marking the currently focused element, so users know where the next keystroke will land. Pointer users rarely need it, but keyboard and assistive-tech users must always see focus or they are operating blind. Usually driven by :focus-visible — shown for keyboard focus, silent for mouse clicks.
AccessibilityUsed withThe first focusable element on the page — usually a visually hidden link. Keyboard users meet it on the first Tab, activate it, and land straight in the main content without walking every nav link. The mandatory escape hatch on nav-heavy sites; WCAG calls it "bypass blocks".
AccessibilityUsed withA temporary overlay listing actions, opened by click or right-click: flat or grouped command items that execute and close on selection. It houses infrequent actions (more, settings, delete), usually behind a "⋯" button or a context click.
ComponentsUsed withA floating search panel summoned with ⌘K / Ctrl+K: type to filter commands, pages or content, navigate with arrow keys, execute with Enter. Popularized by macOS Spotlight; now standard in power-user products.
ComponentsUsed withNot to be confused with
tabs is the tab component; the Tab key in keyboard-navigation is the focus-mover — same word, different things.