SEO 百科

键盘可达

本页目录

键盘可达

键盘可达 指页面功能只用键盘（Tab、Enter、空格、方向键）就能完成，不依赖鼠标或触屏[1]。这是 WCAG 可操作性的第一条，规范里对应的成功标准是不依赖特定输入设备[2]。

五条落地要求

第一条，能聚焦的元素应当是可操作的，能 Tab 到却什么都做不了会让键盘用户卡住[1]。第二条，能用鼠标点的东西也要能用键盘触发，写了 onclick 就要补 onkeydown，两条路径行为一致[1]。第三条，可聚焦元素要有可见焦点样式，用 :focus 与 :focus-visible 实现[1]。第四条，链接与输入框默认就在焦点序列里，自制组件要显式加 tabindex="0"[1]。第五条，焦点顺序应与文档逻辑顺序一致。

tabindex 的取值

tabindex="0"    进入默认焦点顺序，按文档位置排
tabindex="-1"   不进 Tab 序列，可被脚本聚焦
tabindex="1"    插到默认顺序前面，不建议

正值会把元素提前，多个正值按数值排，结果是焦点顺序与页面视觉顺序对不上，键盘用户容易迷路；正确做法是把 HTML 结构本身排对[1]。

自查步骤

用 Tab 与 Enter 走一遍主流程，记下断点：菜单收起来后能不能展开、日期选择器能不能改值、下拉能不能用方向键[3]。浏览器开发者工具的辅助功能面板可以检查焦点顺序与辅助功能树里是否缺了交互语义[3]。

与搜索的关系

键盘不可达常与脚本渲染同时出现。抓取不会点击按钮，交互之后才有的内容在静态 HTML 里可能读不到[4]。把翻页与导航做成真实链接，两边同时受益[4]。

附录

参见

参考资料

官方（境外）

  1. 《Keyboard accessible》，MDN Web 文档。
  2. 《Understanding SC 2.1.1 Keyboard》，W3C WAI。
  3. 《使用 Tab 和 Enter 键检查键盘支持》，Microsoft Edge 文档。
  4. 《了解 JavaScript SEO 基础知识》，Google 搜索中心。

外部链接