键盘操作基础知识

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

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

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

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

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

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

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

如需检查应用的标签页顺序是否合理,请尝试按 Tab 键浏览网页。一般来说,焦点应遵循阅读顺序,从左到右、从页面顶部到底部移动。

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

请尝试按 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

后续步骤

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