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