键盘焦点

许多人使用键盘（或模仿键盘功能的软件或硬件，例如开关设备）作为主要的导航方式。这可能是出于个人偏好、效率或硬件损坏。

暂时性身体限制（例如手腕扭伤）或精细运动障碍（例如腕管综合征）的人可能会选择使用键盘进行导航。 低视力或失明的用户可能会结合使用键盘和放大软件或屏幕阅读器软件进行导航。不过，他们可能会使用与视力正常的用户不同的键盘快捷键命令来浏览屏幕。

一些没有残疾的人也可能会选择使用键盘进行导航。

对于所有这些残疾和情况，键盘支持都至关重要。键盘无障碍功能的大部分都围绕焦点展开。焦点是指屏幕上主动接收键盘输入的元素。

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

焦点顺序

键盘用户可以导航到的元素称为可聚焦元素。焦点顺序 也称为 Tab 键顺序或导航顺序，是指元素获得 焦点的顺序。默认焦点顺序必须符合逻辑、直观，并且与页面的视觉顺序一致。

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

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

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

Tabindex

焦点顺序从具有正 tabindex 属性的元素（如果有）开始，并从最小的正数移动到 最大的正数（例如 1、2、3）。然后，它会按照元素在 DOM 中的顺序遍历 tabindex 为零的元素。任何具有负 tabindex 的元素都会从自然焦点顺序中移除。

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

同样，如果您有一个通常可聚焦但处于非活动状态的元素（例如，在输入字段填写完毕之前无法操作的按钮），则应为此元素添加负 tabindex (tabindex="-1")。添加负 tabindex 会向辅助技术和键盘发出信号，表明应从自然焦点顺序中移除此按钮。但请放心，您可以使用 JavaScript 在需要时将焦点添加回该元素。

在此示例中，tabindex 属性已添加到自然不会获得焦点的元素。元素的顺序已使用 tabindex 进行操控，以说明其对焦点顺序的影响。这是一个不应执行的操作的示例！

跳过链接

如今，大多数网站的页面主页眉中都有一个长长的菜单链接列表，这些链接在各个页面中都是一致的。这对于一般导航来说非常有用，但对于仅使用键盘的用户来说，可能很难轻松访问网站的主要内容，而无需多次使用 Tab 键。

跳过链接是一种跳过冗余或无用的链接组的方式。跳过链接是锚点链接，它们使用相应部分的 ID 跳转到同一页面的不同部分，而不是将用户发送到网站上的另一个页面或外部资源。跳过链接通常作为用户访问网站时遇到的第一个可聚焦元素添加，并且可以根据设计要求可见或在视觉上隐藏，直到用户使用 Tab 键浏览到该链接。

当用户按下 Tab 键并且存在有效的跳过链接时，系统会将键盘焦点发送到跳过链接。用户可以点击跳过链接，跳过页眉部分和主导航。如果他们选择不点击跳过链接并继续使用 Tab 键向下浏览 DOM，则会被发送到下一个可聚焦元素。

与所有链接一样，跳过链接必须包含有关链接用途的上下文。添加“跳至主要内容”短语可让用户知道链接会将他们带到哪里。在为链接提供额外上下文时，您可以选择多种代码选项，例如 aria-labelledby、 aria-label，或者将其添加到 <a> 元素的文本内容中，如示例所示。

焦点指示器

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

可见的焦点指示器对于告知用户他们在页面上的位置至关重要。对于仅使用键盘的视力正常用户来说，这一点尤为重要。 “焦点不被遮盖（最低要求）” 可确保焦点指示器不会隐藏在其他组件下方。

浏览器默认样式

如今，每个现代网络浏览器都有不同的默认视觉样式，这些样式适用于网站或应用中的可聚焦元素，有些比其他元素更清晰可见。当用户使用 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 */
}

自定义样式

当然，您可以超越默认浏览器样式，创建与您的主题相辅相成的自定义焦点指示器。在创建自定义焦点指示器时，您可以充分发挥创意！

焦点指示器的形状可以采用多种形式，无论是轮廓、边框、下划线、框、背景更改，还是其他明显的样式更改，都不应仅依赖颜色来指示键盘焦点在该元素上处于活动状态。

您可以更改焦点指示器样式，以确保其可见。 例如，当页面具有白色背景时，您可以将按钮焦点指示器设置为蓝色背景。当页面具有蓝色背景时，您可以将同一按钮焦点样式设置为白色背景。

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

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