键盘导航
Keyboard Navigation
别名:键盘导航键盘操作键盘可达tab 顺序不用鼠标操作keyboard nav
这是什么
让所有功能都能只用键盘完成：Tab/Shift+Tab 按合理顺序移动焦点，复合组件内用方向键漫游并配 roving tabindex，Escape 关闭浮层并归还焦点。这是焦点环之外的一整套焦点秩序，规则写在 ARIA APG 里。
名词辨析
「Tab 键」是移动焦点的按键，「标签页（Tabs）」是一个组件——英文同形，中文口语都可能说成 Tab，一个是输入按键，一个是界面元素。
交互实验室
试一试，再决定怎么用正在加载实验室…
✓ 适用场景
- 工具栏、菜单、标签页等复合组件的组内焦点管理
- 弹层、抽屉、对话框需要打开与关闭的焦点闭环
- 任何必须「无鼠标可完成」的核心流程
✕ 不适用场景
- 用 tabindex="0" 把非交互元素强行拉进 Tab 序
- 组内每个项都 tabindex="0"，方向键又不能漫游
- Escape 关掉浮层后焦点掉回 body 顶
常见形式
线性 Tab 序
Linear tab order
DOM 顺序即焦点顺序，页面级默认
漫游 tabindex
Roving tabindex
组内仅一项 tabindex="0"，方向键切换
Escape 归还焦点
Escape dismiss
关闭浮层后焦点回到触发元素
实现要点
tabindex:focus-visiblekeydown页面级用自然 DOM 顺序 + 原生可交互元素，别用正数 tabindex 重排。复合组件按 APG：组内一项 tabindex="0" 其余 -1，keydown 处理方向键/Home/End 并 .focus() 目标项；浮层打开时焦点移入，Escape 关闭并归还触发元素。keydown 里 preventDefault 前先确认按键属于该组件。
平台 API
tabindexkeydown:focus-visible代码里叫什么
同一控件在不同体系里的叫号——用对名字，Prompt 和检索才准。
| 体系 | 名称 |
|---|---|
| WAI-ARIA APG | Keyboard Interaction |
| WCAG | 2.4.3 Focus Order |
相关概念
用可见轮廓标记当前键盘焦点位置，让用户知道下一个按键会落在哪里。鼠标点击往往不需要它，但键盘与辅助技术用户必须始终看见焦点在哪，否则只能盲操作。通常用 :focus-visible 控制——键盘聚焦才显示，鼠标点击不打扰。
无障碍搭配使用页面第一个可聚焦元素，通常是视觉上隐藏的链接；键盘用户按下第一个 Tab 就能看见它，激活后直接跳到主内容区，不必逐个穿过顶部导航链接。长导航站点的必备逃生口，WCAG 称之为「跳过区块」。
无障碍搭配使用点击或右键触发的临时操作列表浮层：平铺或分组的命令项，选中即执行并关闭。 用于收纳非高频操作（更多、设置、删除），通常以「⋯」按钮或右键唤起。
组件搭配使用用快捷键（⌘K / Ctrl+K）唤出的浮动搜索面板：输入即筛选命令、页面或内容， 键盘上下选择、回车执行。macOS Spotlight 把它带入大众视野， 现在是效率工具和开发者产品的标配。
组件搭配使用容易混淆
tabs 是标签页组件；keyboard-navigation 里的 Tab 键是焦点移动按键——同名不同物。