键盘焦点

许多人使用键盘或其他模仿键盘功能的软件/硬件（例如开关设备）作为他们的主要导航方式。存在暂时性身体限制（例如扭伤手腕或腕管等精细运动障碍）以及一些残障人士可能会出于个人偏好、效率或硬件损坏而选择使用键盘浏览网页。

弱视或盲人用户可以结合使用键盘与放大功能或屏幕阅读器软件进行导航。不过，他们使用键盘快捷键命令浏览屏幕的方式可能与视力正常的用户不同。

为所有这些残障人士和情况提供键盘支持至关重要。键盘无障碍功能的大部分集中在焦点上。焦点是指屏幕上的哪个元素当前从键盘接收输入。

在本单元中，我们将重点介绍键盘和可聚焦元素的 HTML 结构和 CSS 样式。JavaScript 模块包含有关互动元素的焦点管理和按键的更多信息。

焦点顺序

键盘用户可以导航到的元素称为可聚焦元素。焦点顺序（也称为 Tab 键或导航顺序）是元素获得焦点的顺序。默认焦点顺序必须逻辑清晰、直观，并与页面的视觉顺序相匹配。

对于大多数语言，焦点顺序从页面顶部开始，到底部结束，从左向右移动。不过，某些语言是从右向左阅读，因此网页的主要语言可能需要不同的焦点顺序。

默认情况下，焦点顺序包括自然可聚焦的 HTML 元素，例如链接、复选框和文本输入。可自然聚焦的 HTML 元素包括内置的 Tab 键顺序支持和基本的键盘事件处理。

您可以更新焦点顺序，以包括任何通常不会获得焦点的元素，例如非交互式 HTML 元素、自定义组件，或使用可替换自然焦点语义的 ARIA 元素。

注意 ：按 tab 键可将键盘焦点向上移动 DOM。shift + tab 将焦点向下移动 DOM。

制表符索引

聚焦顺序从具有正 tabindex 属性（如有）的元素开始，并从最小正数向最大（如 1、2、3）移动。然后，根据这些元素在 DOM 中的顺序，逐一检查 tabindex 为零的元素。任何具有负数 tabindex 的元素都将从自然焦点顺序中移除。

将零 (tabindex="0") 的 tabindex 应用到通常不可聚焦的元素时，系统会按照这些元素在 DOM 中的显示方式将这些元素添加到页面的自然焦点顺序中。不过，与自然可聚焦的 HTML 元素不同，您必须提供额外的键盘支持，才能使这些元素完全可供访问。

同样，如果您有一个通常可聚焦但处于非活动状态的元素（例如，某个按钮在填充输入字段前处于非活动状态），则应为此元素添加负的 tabindex (tabindex="-1")。向辅助技术和键盘添加负的 tabindex 信号，表明应从自然焦点顺序中移除该按钮。不过别担心，您可以根据需要使用 JavaScript 将焦点重新添加到元素上。

在此示例中，我们向自然不会获得焦点的元素添加了 tabindex 属性。系统使用 tabindex 操纵这些元素的顺序，以说明它在焦点顺序方面的作用。这是一个错误做法的示例！

以键盘用户的方式通过 CodePen HTML 按 Tab 键操作。

注意：一般来说，应避免使用正 tabindex。将焦点放在非交互式元素上并破坏正常的焦点顺序可能会使用户感到困惑和沮丧。极少数情况下需要为不可聚焦的元素添加正 tabindex (tabindex= "1")。

跳过链接

目前，大多数网站的页面主标题中都有长长的菜单链接列表，而且每个页面都是一致的。这对于一般导航来说非常棒，但对于仅使用键盘的用户来说，很难轻松转到网站的主要内容，而无需多次按 Tab 键。

如需跳过冗余或无用的链接组，一种方法是添加跳过链接。跳转链接是一种锚定链接，它使用相应部分的 ID 跳转到同一网页的其他部分，而不是将用户转到网站上的其他网页或外部资源。跳转链接通常会添加为用户到达网站时遇到的第一个可聚焦元素，并且在用户点按链接之前可以显示或隐藏，具体取决于设计要求。

当用户按 Tab 键且有效的跳过链接存在后，系统会将键盘焦点发送到跳过链接。用户可以点击“跳过”链接并跳转至标题部分和主导航栏。如果他们选择不点击跳过链接而继续在 DOM 中向下按 Tab 键，系统会将其转到下一个可聚焦元素。

与所有链接一样，跳过链接必须包含有关链接用途的背景信息，这一点非常重要。添加“跳至主要内容”短语可让用户知道点击链接后会转到何处。在为链接提供其他上下文（如 aria-labelledby、aria-label）或将其添加到 <a> 元素的文本内容时，有多个代码选项可供选择，如示例所示。

观察键盘用户在有无跳过链接时导航的情况。

焦点指示标志

正如您刚刚所学，焦点顺序是键盘无障碍功能的一个重要方面。确定如何设置焦点的样式也很重要。因为即使焦点顺序非常棒，如果没有适当的样式，用户如何知道自己在网页上的位置呢？

可见的焦点指示标志是让用户始终了解自己在网页上的位置的重要工具。对于视力正常的键盘用户来说，这项功能尤为重要。

注意 ：WCAG 2.2 的新成功标准不模糊（最低）将确保焦点指示标志不会隐藏在其他组件之下。

浏览器默认样式设置

如今，每个现代网络浏览器都有不同的默认视觉样式，适用于您的网站或应用中的可聚焦元素，有些元素比其他浏览器更容易可见。当用户按 Tab 键浏览页面时，系统会在相应元素获得键盘焦点时应用此样式。

如果您允许浏览器处理焦点样式，请务必检查您的代码，以确认主题不会替换浏览器的默认样式。替换项通常在样式表中写为 "outline: 0" 或 "outline: none"。这小段代码可能会移除浏览器的默认焦点指示器样式，导致用户很难浏览您的网站或应用。

错误做法

a:focus {
  outline: none; /* don't do this! */
}

正确做法

a:focus {
  outline: auto 5px Highlight; /* for non-webkit browsers */
  outline: auto 5px -webkit-focus-ring-color; /* for webkit browsers */
}

自定义样式

当然，您可以在默认浏览器样式的基础上，创建一个与您的主题相得益彰的自定义焦点指示标志。创建自定义焦点指示器时，您可以自由发挥创意！

焦点指示标志形状可以有多种形式，包括轮廓、边框、下划线、方框、背景更改或一些其他不依赖于颜色来表示键盘焦点在该元素上的明显样式更改。

您可以更改焦点指示器样式，确保它不会在后台丢失。例如，当页面采用白色背景时，您可以将按钮焦点指示器设置为蓝色背景。当页面使用蓝色背景时，您可以将同一按钮焦点样式设置为白色背景。

您可以根据元素类型更改焦点元素样式。例如，您可以为正文链接使用虚线下划线，但为按钮元素选择圆角边框。

注意：

根据对焦指示器的样式设置，它可能还需要满足背景的最低色彩对比度要求。

我们建议所有焦点指示器都采用 3:1 的色彩对比度。这将满足 WCAG 2.2 的焦点外观（最低）要求。

观看视频，了解键盘用户在每个样式化焦点元素上按 Tab 键会发生什么。

对于一个页面上的焦点指示器样式数量没有限制，但请务必将其控制在合理的数量内，以避免不必要的混淆。

小结

为使网站或应用具备无障碍功能，可使用鼠标访问的所有内容也必须通过键盘访问。此模块侧重于键盘无障碍功能的视觉方面，尤其是焦点顺序和焦点指示器。

检查您的掌握程度

测试您对 ARIA 和 HTML 知识的掌握情况

以下哪个 :focus CSS 样式示例在白色背景上最易于访问？

outline: 0.5rem solid yellow;

这不符合 WCAG 的色彩对比度指南。

background-color:black;

尽管用户也许可以使用此 API，但此设计需要额外考虑文本颜色和在文档中的位置。

text-decoration: dotted underline 2px blue;

此设计是此列表中最容易使用的选项。但是，这不是唯一的无障碍设计选项。请注意，您的设计应遵循 WCAG 规定的 3:1 色彩对比度。

outline: none; text-decoration:none; background:none;

对于某些键盘用户来说，视觉指示器非常重要。始终包含对焦的样式。

跳过链接有什么用途？

帮助键盘用户跳过冗余或无用的链接组。

这对于较长的导航菜单尤其有用，因为用户可能已经转到了感兴趣的页面。

帮助键盘用户跳过无趣的内容。

因此，没必要知道用户感兴趣的内容或不感兴趣的内容。这不是定义跳过链接使用情况的实用方法。