键盘操作基础知识

Rob Dodson

从具有暂时性和永久性运动障碍的用户到使用键盘快捷键提高效率和工作效率的用户，许多不同的用户都依赖键盘在应用中导航。为应用制定良好的键盘导航策略可以为所有用户打造更好的体验。

焦点和 Tab 键顺序

在特定时刻，“焦点”是指当前应用中的哪个元素（例如字段、复选框、按钮或链接）当前从键盘接收输入。除了接收键盘事件外，获得焦点的元素还会获取从剪贴板粘贴的内容。

如需将焦点移至某个页面，请使用 TAB 向前导航，使用 SHIFT + TAB 向后导航。当前聚焦的元素通常由焦点环表示，并且各种浏览器会以不同的样式设置其焦点环的样式。焦点通过互动元素向前和向后跳转的顺序称为“制表符顺序”。

文本字段、按钮和选择列表等交互式 HTML 元素是隐式可聚焦的：它们会根据它们在 DOM 中的位置自动插入到 Tab 键顺序中。这些互动元素也具有内置的键盘事件处理功能。段落和 div 等元素不是隐式可聚焦的，因为用户通常不需要与它们互动。

实现符合逻辑的 Tab 键顺序是为用户提供流畅的键盘导航体验的重要环节。在评估和调整标签页顺序时，请注意以下两个要点：

  1. 按逻辑顺序排列 DOM 中的元素
  2. 正确设置不应获得焦点的屏幕外内容的可见性

按逻辑顺序排列 DOM 中的元素

如需检查应用的 Tab 键顺序是否合乎逻辑，请尝试在页面上循环。一般来说，焦点应遵循阅读顺序，从左到右从上到下。

如果焦点顺序有误，您应重新排列 DOM 中的元素，以使 Tab 键顺序更加自然。如果您希望某些内容在屏幕上较早地显示，请将其移到 DOM 中靠前的位置。

尝试在以下两组按钮之间按 Tab 键，体验符合逻辑的标签页顺序与非逻辑的 Tab 键顺序：

逻辑 Tab 键顺序

制表符顺序不符合逻辑

下面对这两个示例的代码进行比较：

逻辑 Tab 键顺序

<button>Kiwi</button>
<button>Peach</button>
<button>Coconut</button>

制表符顺序不符合逻辑

<button style="float: right">Kiwi</button>
<button>Peach</button>
<button>Coconut</button>

使用 CSS 更改元素的视觉位置时要小心，以免造成不逻辑的 Tab 键顺序。如需解决上面没有逻辑的 Tab 键顺序问题，请在 DOM 中将浮动的“Kiwi”按钮移至“Coconut”按钮的后面，然后移除内嵌样式。

正确设置屏幕外内容的可见性

有时，屏幕外互动元素需要存在于 DOM 中，但不应按照 Tab 键顺序。例如，如果您有一个在您点击按钮时打开的自适应侧边导航栏，则用户不应该在关闭侧边导航栏时关注它。

要阻止某个特定的互动元素获得焦点，您应为该元素提供以下任一 CSS 属性：

  • display: none
  • visibility: hidden

如需将该元素重新添加到标签页顺序中（例如在侧边导航栏打开时），请将上述 CSS 属性分别替换为：

  • display: block
  • visibility: visible

后续步骤

对于几乎完全使用键盘或其他输入设备操作计算机的用户，逻辑 Tab 键顺序对于使您的应用易于访问和使用至关重要。建议您尝试在每次发布前在应用中循环切换，这是一种查看标签页顺序的一个好习惯。