网站真正实现键盘可访问性意味着什么
键盘导航是无障碍网页设计的关键方面，注重细节至关重要。优先考虑键盘导航就是优先考虑多样化用户的体验，既能扩大网站覆盖范围，又能促进更具包容性的网络环境。
高效导航对功能性网站至关重要，但并非所有人都以相同方式使用互联网。虽然大多数访问者通过移动设备滚动或鼠标点击浏览，但许多人仅使用键盘。高达1000万美国成年人患有腕管综合征，握鼠标可能引起疼痛，而视力问题会使跟踪光标变得困难。因此，保持网站键盘可访问性对于实现普遍吸引力和无障碍性至关重要。
理解键盘导航
键盘导航允许用户仅通过键盘输入与网站互动，包括使用快捷键和通过Tab与Enter键选择元素。
受众可能使用的操作系统和特定应用程序中存在500多种键盘快捷键。网页导航的标准快捷键包括Ctrl+F查找单词或资源、Shift+箭头选择文本、Ctrl+Tab在浏览器标签间切换。虽然这些主要是特定浏览器或操作系统背后软件公司的责任，但仍需考虑它们。
单键导航是键盘可访问性的另一个关键部分。用户可通过Tab和Shift键在可点击项目间移动，使用箭头键滚动，按Enter或空格键“点击”链接，以及用Esc退出弹窗。
（大预览图）
《华盛顿邮报》首页更进一步。按Tab键按预期高亮显示可点击元素，但首次按键会首先显示网站无障碍声明链接。用户可以导航跳过它，但包含这一设计突显了其对键盘可访问性作为无障碍事项的理解。
应了解人们如何使用这些控件，以便构建支持它们的网站。这些导航选项通常是标准化的，因此任何偏差或功能缺失都会显得突出。确保键盘可访问性，特别是启用这些特定快捷键和控件，将有助于满足这些期望并避免用户流失。
键盘导航在网页设计中的重要性
键盘可访问性至关重要的原因有几个。最显著的是，它使网站更易于访问。仅在美国，超过四分之一的人有残疾，其中许多情况影响技术使用。例如，运动障碍使使用标准鼠标具有挑战性，而有视力问题的用户通常需要键盘和屏幕阅读器。
除了满足各种使用需求外，启用更广泛的控制方法使网站更方便。当键盘正常工作且感觉更舒适时，使用键盘比鼠标更快。考虑到员工近三分之一的工作时间用于寻找信息，任何效率障碍都可能极具破坏性。
在这些方面的不足可能导致法律纠纷。《美国残疾人法案》等法规要求技术可访问性。虽然ADA对无障碍网站没有具约束力的规则，但其非约束性指南中特别提到了键盘导航。未能支持此类功能不一定意味着面临法律处罚，但法院可以使用这些标准来判断网站是否合理可访问。
2023年，Kitchenaid因未能满足此类标准面临集体诉讼。原告声称该公司的网站不支持替代文本或键盘导航，使视力障碍用户无法访问。虽然此案最终庭外和解，但它提醒人们忽视包容性可能带来的潜在法律和财务后果。
在法律之外，不可访问的网站存在伦理问题，因为它显示了对能使用鼠标者的优待，即使这是无意的。即使没有法律诉讼，公众对这种偏见的认识可能导致访问者减少和公共形象受损。
键盘可访问网站的元素
幸运的是，确保键盘可访问性是一种直接的UX设计实践。由于导航在操作系统和浏览器中是标准化的，键盘可访问的网站采用一些一致的元素。
焦点指示器
“Web Accessibility In Mind”指出，当用户按Tab键时，网站必须提供当前聚焦元素的视觉指示器。焦点指示器通常是高亮图标周围的简单方框。
这些在CSS中是标准的，但一些设计师会隐藏它们，因此避免使用outline:0或outline:none来限制其可见性。还可以在CSS中增加对比度或更改指示器颜色。
（大预览图）
CNN突发新闻首页是强焦点指示器的好例子。按Tab键立即显示方框，足够粗体易于查看，甚至在必要时使用白色边框以在黑色或深色网站元素中突出显示。
逻辑Tab顺序
焦点指示器在元素间移动的顺序也很重要。一般来说，按Tab键应使其从左到右、从上到下移动——与人们阅读英语的方式相同。
一些错误可能阻碍这一过程。禁用按钮通过跳过元素而不解释或高亮显示但不可点击来中断键盘导航流程。类似地，图标不按可预测的左到右、上到下顺序排列的界面将使逻辑Tab移动困难。
（大预览图）
Sutton Maddock车辆租赁网站是一个反面例子。按Tab键时，焦点指示器从“联系”跳到Facebook链接，然后向后跳到Twitter链接。它从右侧开始，移动到下一行时向左移动——与自然感觉相反的顺序。
跳过导航链接
跳过链接也至关重要。这些交互元素让键盘用户无需重复击键即可跳转到特定内容。请记住，这些跳过链接必须在首次按Tab键时首先高亮显示，以便按预期工作。
（大预览图）
汇丰集团首页有几个跳过导航链接。按Tab键显示三个选项，让用户快速跳转到感兴趣的任何网站部分。
键盘可访问的交互元素
最后，键盘可访问网站上的所有交互元素都应可通过击键访问。人们可以用光标点击或拖动的任何内容也应支持导航和交互。启用这一点很简单，只需让用户通过Tab或箭头键选择所有项目，并通过空格或回车键按下它们。
（大预览图）
恰当的是，亚利桑那州立大学关于键盘可访问性的页面很好地展示了这一概念。所有下拉菜单都可以通过Tab导航到并按Enter打开，因此用户无需鼠标即可与之交互。
如何测试键盘可访问性
设计键盘可访问的UX后，应测试以确保其正常工作。最简单的方法是仅用键盘浏览网站。下表概述了确定网站是否真正键盘可访问时要查找的标准。
| 键盘可访问 | 非键盘可访问 |
|---|---|
| 所有元素可通过键盘到达，按Enter时打开。 | 仅部分元素可通过键盘到达。某些链接可能损坏或按Enter时不打开。 |
| 按Tab、空格或Enter时显示在所有浏览器中易于查看的焦点指示器。 | 按所有按钮时焦点指示器可能不出现。方框可能难以查看或仅在某些浏览器中出现。 |
| 首次按Tab时显示至少一个跳过链接，带用户到常访问内容或菜单。继续按Tab将焦点指示器移过这些链接，正常高亮页面元素。 | 首次按Tab时无跳过链接出现。或者，它们在所有其他元素之后出现。跳过链接可能无法使用。 |
| 屏幕阅读器在焦点指示器高亮时可读取每个元素。 | 某些元素高亮时可能不鼓励屏幕阅读器的任何操作。 |
Web内容无障碍指南（WCAG）概述了两条测试规则以验证键盘可访问性：
- 确保所有交互元素可通过Tab键访问
- 检查键盘滚动功能
在网站上线前采用这两个标准审查UX。
典型问题包括无法用Tab键高亮元素或不按自然顺序排列的内容。可以通过尝试用键盘访问所有内容来发现这两个问题。但是，可能更倾向于通过第三方进行可访问性审计。许多私营公司提供这些服务，但也可以使用互联网无障碍局进行基本WCAG审计。
立即让您的网站键盘可访问
键盘可访问性确保满足所有需求和偏好，实现包容性、无障碍的网站设计。虽然实施简单，但也容易忽略，因此在设计UX和测试网站时请记住这些原则。
WCAG提供了几种可用于满足键盘无障碍标准并增强用户体验的技术：
- 技术G90，用于键盘触发的事件处理程序
- 技术G202，用于通用键盘功能
- 技术H91，用于HTML中的表单控件和链接
遵循这些指南并使用WCAG的测试规则创建无障碍网站。记住每次添加元素或更改UX时重新检查。
此外，考虑以下推荐阅读以了解更多关于键盘及其在无障碍中的作用：
- “键盘无障碍指南：HTML和CSS（第1部分）”，Cristian Díaz
- “键盘无障碍指南：JavaScript（第2部分）”，Cristian Díaz
- “机械键盘完整指南”，Ben Frain
- “键盘无障碍的UX改进”，Vitaly Friedman
- “我仅用键盘使用网页一天”，Chris Ashton
用户友好性是行业最佳实践，展示了您对所有人包容性的承诺。即使没有残疾的用户也会欣赏直观、高效的键盘导航。