许多人使用键盘或模仿键盘功能的软件或硬件（例如开关设备）作为他们的主要导航方式。这可能是因为个人偏好、效率或硬件损坏。
暂时性身体限制（如手腕扭伤或腕管病症）的精细运动障碍人士可以选择使用键盘进行导航。低视力或盲人用户可以结合使用键盘和放大镜或屏幕阅读器软件进行导航。不过，他们可能会使用与视力正常的用户不同的键盘快捷键命令在屏幕上导航。
有些非残障人士也可能会选择使用键盘导航。
为所有这些残障情况和情况提供键盘支持至关重要。键盘无障碍功能的很大一部分都集中在焦点上。焦点是指当前屏幕上的哪个元素接收来自键盘的输入。
在本单元中，我们将重点介绍键盘和可聚焦元素的 HTML 结构和 CSS 样式。JavaScript 模块包含有关交互式元素的焦点管理和按键操作的更多信息。
焦点顺序
键盘用户可以导航到的元素称为可聚焦元素。焦点顺序（也称为标签页顺序或导航顺序）是指元素获得焦点的顺序。默认焦点顺序必须符合逻辑、直观且与网页的视觉顺序一致。
对于大多数语言，焦点顺序是从页面顶部开始，到页面底部结束，从左到右移动。不过，有些语言是从右到左读的，因此网页的主要语言可能需要采用不同的焦点顺序。
默认情况下，焦点顺序包括自然可聚焦的 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 */
}
自定义样式
当然，您还可以超越默认的浏览器样式，创建与主题相得益彰的自定义焦点指示器。在创建自定义焦点指示器时，您可以尽情发挥创意！
焦点指示器形状可以有多种形式，例如轮廓、边框、下划线、方框、背景更改或其他明显的样式更改，这些更改不单单依靠颜色来指示键盘的焦点位于该元素上。
您可以更改焦点指示器样式，以确保其可见。例如，当网页采用白色背景时，您可以将按钮焦点指示器设置为蓝色背景。当页面采用蓝色背景时，您可以将同一按钮的聚焦样式设置为白色背景。
您可以根据元素类型更改聚焦元素样式。例如，您可以为正文链接使用点状下划线，但为按钮元素选择圆角边框。
我们没有规定您可以在一个网页上使用多少种焦点指示器样式，但请务必将其数量控制在合理范围内，以免造成不必要的混淆。
检查您的理解情况
测试您对 ARIA 和 HTML 知识的掌握情况。
在白色背景上，哪个 :focus CSS 样式示例最易于访问？
outline: 0.5rem solid yellow;background-color:black;text-decoration: dotted underline 2px blue;outline: none; text-decoration:none; background:none;跳过链接的用途是什么？