键盘操作基础知识

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

焦点和 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 键浏览应用