键盘焦点

许多人使用键盘或其他模仿 （例如开关设备）作为键盘的主要功能 导航。暂时性身体限制（如手腕扭伤）的人士 或腕管等细小的运动障碍者， 出于个人原因，可能会选择使用键盘浏览网页 性能、性能或硬件损坏等问题

弱视或盲人用户可以使用键盘和 放大功能或屏幕阅读器软件。不过，它们可能会使用不同的 与视力正常的用户相比，使用键盘快捷键命令浏览屏幕。

为所有这些残障情况和情况提供键盘支持至关重要。答 键盘无障碍功能在很大程度上是以焦点为中心。焦点是指屏幕上的哪个元素 可接收键盘的输入

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

焦点顺序

键盘用户可以导航到的元素称为可聚焦元素 元素。焦点顺序。 （也称为 Tab 键或导航顺序）是指元素接收元素的顺序， 关注度。默认焦点顺序必须自然、直观，并与视觉内容相一致 网页的顺序。

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

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

您可以更新焦点顺序，以纳入所有通常不符合该顺序的元素 获得焦点，例如非交互式 HTML 元素、自定义组件或 带有 ARIA 替换 自然焦点语义。

注意 ：您可以使用 tab 键在 DOM 上移动键盘焦点。shift + tab：用于在 DOM 中向下移动焦点。

Tabindex

焦点顺序从具有正数的元素开始： tabindex 属性（如果有），并从最小的正数移至 最大（如 1、2、3）。然后继续遍历 Tabindex 为 它们在 DOM 中的顺序相同。所有具有负 tabindex 的元素 从自然焦点顺序中删除。

tabindex 零 (tabindex="0") 会应用于通常不可聚焦的元素，它们会 按照它们的显示方式添加到网页的自然焦点顺序中， 在 DOM 中。不过，与自然的可聚焦 HTML 元素不同， 提供额外的键盘支持 让它们完全可供访问

同样，如果您的某个元素通常可聚焦，但处于 非活动状态 - 例如，在输入字段被填满前将一直处于无效状态的按钮 in - 您应为此元素添加负 Tabindex (tabindex="-1")。正在添加 负 Tabindex 会指示辅助技术和键盘， 按钮应从自然焦点顺序中删除。但不必担心， 根据需要使用 JavaScript 将焦点重新添加到元素上。

在此示例中，未将 tabindex 属性添加到 就能自然而然地获得焦点这些元素的顺序是使用 tabindex 来说明它在对焦顺序方面的作用。这是一个 正确做法的示例！

。 <ph type="x-smartling-placeholder">

</ph>

以键盘用户的身份浏览 CodePen HTML。

<ph type="x-smartling-placeholder">

</ph> 注意：一般来说，您应避免使用正的 tabindex。如果将焦点置于非互动元素上并打断正常的焦点顺序，可能会使用户感到困惑和沮丧。在极少数情况下，需要向不可聚焦元素添加正 Tabindex (tabindex= "1")。

跳过链接

如今大多数网站的网页主标题中都有一个很长的菜单链接列表 确保网页间的一致性这非常适合常规导航 只使用键盘的用户很难轻松访问网站的主要 而不必多次按 Tab 键。

跳过多余或无用链接组的一种方法是添加 跳过链接。跳转链接是锚标记 使用相应部分的 而无需将用户转到网站上的其他网页或外部 资源。跳转链接通常作为用户的第一个可聚焦元素添加 会在到达相应网站时遇到并且可以看到或隐藏起来的情况 具体取决于设计需要的内容。

当用户按 Tab 键且存在有效的跳过链接时，它会发送 将键盘焦点移至“跳过”链接。用户可以点击跳过链接 （位于标题部分和主导航栏下方）。如果他们选择不点击 跳过链接并继续按 Tab 键向下点击 DOM，它们会发送到下一个 可聚焦元素。

与所有链接一样，跳转链接包含有关 链接的用途。添加短语“跳至主要内容”让用户知道 链接指向的位置有多种代码选项可供选择 为您的链接提供更多背景信息，例如 aria-labelledby、 aria-label 添加标签 添加到 <a> 元素的文本内容中，如示例所示。

。 <ph type="x-smartling-placeholder">

</ph>

观看一位键盘用户使用和不使用“跳过”链接进行导航的画面。

焦点指示标志

正如您刚刚了解到的，焦点顺序是键盘的一个重要方面 无障碍功能。决定焦点的样式也很重要。因为 即使焦点顺序极佳，用户如何得知自己所处的位置 样式错误？

一个可见的焦点指示器 是告诉用户他们始终在 页面。这对于视力正常且仅使用键盘的用户来说尤为重要。

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

浏览器默认样式

如今，每个现代网络浏览器都有一个不同的默认视觉样式 适用于您网站或应用中可聚焦的元素，某些元素更容易被用户看到 相较之下当用户在页面中循环浏览时，系统会将此样式作为 元素获得键盘焦点。

如果您允许浏览器处理焦点样式，请务必查看 确认主题不会替换浏览器的默认主题 样式。在下列示例中，替换项通常写为 "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 的焦点外观（最低）要求。

。 <ph type="x-smartling-placeholder">

</ph>

观察键盘用户按 Tab 键浏览每个带样式的焦点元素时会发生什么。

对于同一焦点指示器样式的数量，并没有规定 但请务必将其控制在合理的范围内 造成混淆。

小结

为了让网站或应用被视为具有无障碍性 也必须使用键盘访问。本单元 侧重于键盘无障碍功能的视觉方面，尤其是焦点 顺序和焦点指示器。

检查您的理解情况

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

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

outline: 0.5rem solid yellow;

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

background-color:black;

尽管这有可能是无障碍的，但这种设计需要额外考虑文本颜色和在文档中的位置。

text-decoration: dotted underline 2px blue;

此设计是此列表中最易于访问的选项。不过，这不是唯一易于使用的设计选择。请注意，您的设计应符合 WCAG 设定的 3:1 色彩对比度。

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

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

跳过链接的用途是什么？

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

这对于较长的导航菜单尤其有用，因为此时用户可能已经打开了相关页面。

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

您不一定能够知道用户对哪些内容感兴趣，对哪些内容不感兴趣。它无法用来定义是否使用跳转链接。