键盘操作基础知识

罗布·多德森

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

焦点和 Tab 键顺序

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

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

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

如要为用户提供流畅的键盘导航体验，实现逻辑标签页顺序是非常重要的一环。在评估和调整标签页顺序时，主要应该注意以下两个要点：

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

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

如需检查应用的标签页顺序是否合乎逻辑，请尝试按 Tab 键在页面中浏览。一般来说，焦点应按照阅读顺序（从左向右）从页面顶部移至底部。

如果焦点顺序看似有误，您应该重新排列 DOM 中的元素，使标签页顺序更加自然。如果您想让某项内容在屏幕上较早地显示，请在 DOM 中早一点移动该内容。

请尝试按 Tab 键来浏览下面两组按钮，体验符合逻辑的 Tab 键顺序与无逻辑的 Tab 键顺序：

逻辑标签页顺序

不合乎逻辑的 Tab 键顺序

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

逻辑标签页顺序

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

不合乎逻辑的 Tab 键顺序

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

使用 CSS 更改元素的视觉位置时，请务必小心，以免创建不合逻辑的 Tab 键顺序。若要解决上述不合逻辑的 Tab 键顺序，请将悬浮的“Kiwi”按钮移至 DOM 中“Coconut”按钮的后面，然后移除内嵌样式。

正确设置屏幕外内容的公开范围

有时，屏幕外互动元素需要位于 DOM 中，但不该出现在标签页顺序中。例如，如果您有一个自适应侧边导航栏，该导航栏会在您点击某个按钮时打开，那么用户在侧边导航栏关闭时，应该无法聚焦于该导航栏。

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

  • display: none
  • visibility: hidden

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

  • display: block
  • visibility: visible

后续步骤

对于几乎完全使用键盘或其他输入设备来操作计算机的用户，逻辑 Tab 顺序对于使应用可访问和使用至关重要。检查标签页顺序时，建议您在每次发布前尝试按 Tab 键浏览应用。