键盘操作基础知识

Rob Dodson

许多不同类型的用户都依赖于键盘来浏览应用，其中包括行动能力暂时或永久受损的用户，以及使用键盘快捷键提高效率的用户。为应用制定良好的键盘导航策略，可为所有用户打造更好的体验。

焦点和标签页顺序

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

如需在页面上移动焦点，请使用 TAB 前进，使用 SHIFT + TAB 返回。当前聚焦的元素通常由聚焦环指示，不同浏览器的聚焦环样式各不相同。焦点在交互式元素中正向和反向跳转的顺序称为 Tab 键顺序。

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

实现逻辑性标签页顺序是向用户提供顺畅键盘导航体验的重要部分。在评估和调整标签页顺序时，请注意以下两个要点：

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

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

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

如果焦点顺序似乎不正确，您应重新排列 DOM 中的元素，以使标签页顺序更自然。如果您希望某些内容在屏幕上较早地显示，请将其移到 DOM 中靠前的位置。

请尝试按 Tab 键浏览下方两组按钮，体验合理的标签页顺序与不合理的标签页顺序：

逻辑标签页顺序

标签页顺序不合理

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

逻辑 Tab 键顺序

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

标签页顺序不合理

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

使用 CSS 更改元素的视觉位置时要小心，以免创建不合理的标签页顺序。如需修正上述不合理的标签页顺序，请移动浮动“Kiwi”按钮，使其在 DOM 中位于“Coconut”按钮之后，然后移除内嵌样式。

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

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

如需阻止特定交互元素获得焦点，您应为该元素提供以下任一 CSS 属性：

  • display: none
  • visibility: hidden

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

  • display: block
  • visibility: visible

后续步骤

对于几乎全靠键盘或其他输入设备来操作计算机的用户，合理的标签页顺序对于提高应用的可访问性和易用性至关重要。为了养成检查标签页顺序的好习惯，请尝试在每次发布前在应用中循环跳格。