键盘操作基础知识

Rob Dodson

许多不同的用户都依赖键盘来浏览应用，包括暂时性和永久性运动障碍用户，以及使用键盘快捷键来提高效率和工作效率的用户。为应用制定出色的键盘导航策略有助于为所有用户打造更出色的体验。

焦点和 Tab 键顺序

在给定时刻，焦点是指应用中正在主动接收键盘输入的元素，例如字段、复选框、按钮或链接。除了键盘事件之外，焦点元素还会获取从剪贴板粘贴的内容。

如需在网页上移动焦点，请使用 TAB 向前导航，使用 SHIFT + TAB 向后导航。聚焦元素通常由聚焦环指示，并且各种浏览器对聚焦环的样式设置各不相同。焦点在互动元素之间向前和向后移动的顺序称为Tab 键顺序。

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

实现逻辑标签页顺序是为用户提供顺畅的键盘导航体验的重要一环。在评估和调整标签页顺序时，需要牢记以下两个主要理念：

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

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

如需检查应用的标签页顺序是否合理，请尝试在网页中按 Tab 键。一般来说，焦点应遵循阅读顺序，从左到右、从上到下移动。

如果焦点顺序似乎有误，您应重新排列 DOM 中的元素，使 Tab 顺序更自然。如需更改网站上的视觉排列，请将其移至 DOM 中更靠前的位置，而不是通过 CSS 设置样式使其显示在更靠前的位置。

例如：

错误做法
<button style="float: right">Kiwi</button>
<button>Peach</button>
<button>Coconut</button>
 奇异果按钮是浮动的，这会造成不合逻辑的焦点顺序。
正确做法
<button>Peach</button>
<button>Coconut</button>
<button>Kiwi</button>
 按照您希望的标签页顺序排列 HTML 代码。

使用 CSS 更改元素的视觉位置时，请务必小心，以免创建不合逻辑的 Tab 键顺序。为了修正不合逻辑的标签页顺序，我们将浮动“Kiwi”按钮移至 Coconut 之后，并移除了内嵌样式。

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

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

如需防止特定互动元素接收焦点，您应为该元素提供以下任一 CSS 属性：

  • display: none
  • visibility: hidden

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

  • display: block
  • visibility: visible

后续步骤

对于几乎完全使用键盘或其他输入设备操作计算机的用户来说，合理的 Tab 键顺序对于确保应用的可访问性和可用性至关重要。养成良好的习惯，在每次发布之前尝试通过 Tab 键浏览您的应用，检查标签页顺序。