视障、低视力及行动不便用户主要依赖键盘而非鼠标浏览网站。若在线表单禁止用户在未填写某字段时通过 Tab 键遍历,便会形成“键盘陷阱”。Newegg 的结账表单则允许用户在不填写任何字段的情况下通过 Tab 键遍历并返回浏览器地址栏,有效避免了该问题。
在 Web 开发会议中,演讲者常分享 IDE 键盘快捷键以提升编程效率。程序员倾向于使用键盘以减少与鼠标的频繁切换。然而,许多网站仍导致用户难以或无法脱离鼠标执行操作,这种“使用键盘导航”与“为键盘开发”之间的失衡现象值得关注。
桌面软件的快捷键通常是多键组合以激活隐藏菜单,而网页键盘导航仅需少量高频按键。对于普通电商网站,以下由浏览器原生定义的基础按键即可满足核心需求:
- TAB
- SHIFT+TAB
- SPACE
- ENTER
- 左、右、上、下方向键
为什么仅使用键盘进行导航?
主要依赖键盘的人群包括使用屏幕阅读器或放大器的盲人与低视力用户,以及患有多发性硬化症、帕金森病等影响精细运动控制疾病的行动障碍人士。键盘往往是他们与计算机交互的主要工具。
如何使用键盘进行导航
鼠标导航是主动引导过程,用户可通过光标移动和形状变化获得视觉反馈。而键盘导航则由网站引导:使用 TAB 键向前、SHIFT+TAB 向后在可聚焦元素(链接、输入框、按钮)间跳转。
焦点移动顺序依据文档源代码排列,可能与视觉顺序不一致。由于缺乏预知提示,键盘用户难以确认焦点落点。此外,若网站禁用了 :FOCUS 样式,会导致焦点状态不可见,严重阻碍行动不便用户定位当前位置。
避免键盘陷阱
TAB 键应始终用于向前跳转,SHIFT+TAB 用于向后跳转。若此行为被阻断,即构成严重的无障碍问题——“键盘陷阱”。当前最常见的陷阱源于表单验证。
客户端表单验证应在离开未正确填写的必填字段时提供通知,但不应强制用户返回或阻止其进入下一字段。用户可能仅为探索表单结构、到达后续内容或暂未获取特定信息而遍历表单。必填字段并不意味着必须按顺序填写。
链接和表单
ENTER 键用于激活链接或按钮,空格键也可触发按钮;方向键用于在下拉菜单、复选框组或单选按钮组中导航。这些功能仅适用于语义化的原生元素。
若使用 JavaScript 将 DIV 模拟为按钮,键盘将无法聚焦或激活。建议直接使用 <button> 元素,自动获得语义化 HTML 的无障碍优势;若必须模拟,则需额外编写代码确保其支持 TAB 聚焦及 ENTER/SPACE 键操作。
测试网站的无障碍性
键盘无障碍测试无需特殊设备,仅需浏览器和键盘。访问网站并将光标置于地址栏后,连续按 TAB 键,检查是否能清晰感知当前位置、访问所有链接并激活所有按钮。作为键盘依赖用户,能否独立完成电商网站的购买流程是检验无障碍性的关键标准。

