keyboard-navigation

键盘导航

设计交互时，确保用户仅使用键盘就能完成所有任务。这一点不容妥协——它是所有交互无障碍设计的基础。

适用人群

• 无法使用鼠标的运动障碍人士
• 使用开关设备或口棒的人士
• 屏幕阅读器用户（键盘是他们的主要输入方式）
• 偏好使用键盘以提高速度的高级用户
• 手部或手臂暂时受伤的任何人

核心原则

所有内容都必须可访问

• 每个交互元素都必须可通过 Tab 键获得焦点
• 焦点顺序必须与视觉阅读顺序一致（从左到右、从上到下，适用于从左到右书写的语言）
• 任何元素都不应只能通过鼠标悬停或点击来访问
• 自定义组件需要明确设置 tabindex 并添加键盘事件处理程序

焦点必须清晰可见

• 每个交互元素上的焦点指示器都必须清晰可见
• 最低要求：2px 实线轮廓，与背景的对比度为 3:1
• 切勿使用 outline: none 或 outline: 0，除非提供了清晰可见的替代样式
• 整个界面中的焦点样式应保持一致
• 测试：你能否始终看出哪个元素处于焦点状态？

必须管理焦点

• 打开模态框时，将焦点移至模态框内
• 关闭模态框时，将焦点还原到打开它的元素
• 删除内容时，将焦点移至逻辑上紧接其后的元素
• 页面区域动态更新时，适当地管理焦点
• 切勿无意中将焦点困在某处（仅在打开的模态框内限制焦点）

各类组件的键盘操作模式

导航菜单

• Tab 在顶层菜单项之间移动
• 方向键在下拉菜单中移动
• Enter/Space 激活菜单项
• Escape 关闭打开的下拉菜单，并将焦点还原到触发元素

标签页

• Tab 移至当前活动标签页的面板，而不是遍历所有标签页
• 方向键在标签页之间移动
• Enter/Space 激活标签页（非自动激活时）

模态框 / 对话框

• 打开时，焦点移至模态框内第一个可聚焦元素
• Tab 仅在模态框内循环（焦点限制）
• Escape 关闭模态框
• 关闭时，焦点还原到触发元素

表单

• Tab 按逻辑顺序在字段之间移动
• 错误消息可获得焦点或会被读出
• 可在最后一个字段按 Enter 键提交，也可通过可见按钮提交
• 必填字段指示不能只通过颜色传达

拖放

• 始终提供键盘替代操作（上移/下移按钮、选择并放置，或使用方向键重新排序）
• 读出当前位置和可用操作

轮播 / 滑块

• 方向键在项目之间移动
• 提供清晰可见的上一项/下一项按钮
• 聚焦或悬停时暂停自动播放
• 读出当前位置（“第 2 项，共 5 项”）

跳过链接

每个页面都应将“跳至主要内容”链接作为第一个可聚焦元素。这使键盘用户能够跳过重复的导航内容。

• 聚焦时可见（可在获得焦点前视觉隐藏）
• 通过锚点链接到主要内容区域
• 长页面可考虑添加其他跳过链接（“跳至搜索”、“跳至页脚”）

评估清单

• 每个交互元素都可通过 Tab 键访问
• 焦点顺序与视觉顺序一致
• 每个元素上的焦点指示器都清晰可见（2px，对比度为 3:1）
• 模态框会限制焦点，并在关闭时还原焦点
• 所有自定义组件都添加了键盘事件处理程序
• 拖放操作有键盘替代方案
• 跳过链接存在且可用
• 界面中不存在任何键盘陷阱
• 动态内容变化时会适当地管理焦点