这是一个常见但很容易修复的可访问性问题：缺乏焦点指示。在这篇文章中，我将解释我们所说的焦点，并向您展示焦点轮廓如何使您的网站更易于使用。

什么是焦点？

焦点指示器对于依赖它们的人来说，差别巨大。让我们首先了解它们是什么，以及哪些人发现它们有用。

焦点是页面上交互式元素之间发生的事情。这是您首先应该知道的事情。（有关更详细和细致的定义，请参阅可聚焦元素兼容性表。）交互式元素是链接、按钮和表单字段等元素：用户可以与其交互的事物。

在页面上，在任何给定时间，只有一个元素具有焦点。如果您刚刚加载了一个页面，它可能是文档，但一旦您开始点击或使用 Tab 键，它将成为上述交互式元素之一。当前聚焦的元素可以通过document.activeElement找到。

默认情况下，浏览器通过在该元素周围绘制轮廓来传达哪个元素当前具有焦点。默认值因浏览器和平台而异。使用 CSS，您可以覆盖这些默认值，我们稍后会介绍。

谁受益

焦点轮廓帮助用户了解他们在页面上的位置。它们显示当前填充了哪个表单字段，或即将按下哪个按钮。使用鼠标的用户可能会为此使用他们的光标，但并非所有人都在使用鼠标。例如，有许多键盘用户：一只胳膊抱着婴儿的人，患有慢性疾病无法使用鼠标的人，当然还有……开发人员和其他高级用户。除了键盘之外，还有其他工具和输入设备依赖于清晰的焦点指示，例如开关。

不过，受益的不仅仅是键盘用户。焦点指示还有助于注意力持续时间有限或短期记忆存在问题的人，例如，如果他们在填写冗长的表单。

如果网站上指示当前元素的想法看起来很奇怪，请考虑电视界面。大多数人使用遥控器或游戏控制器来使用它们，因此依赖于界面来传达当前选择的内容。

切勿删除它们

并非每个人都喜欢焦点轮廓的外观，有些人认为它们很丑。但这对于路灯也是如此。它们不太可能获得设计奖，但如果您必须在黑暗中步行回家，您会很高兴它们能帮助您看到自己的位置。

像一些网站那样删除焦点样式，对于键盘用户来说就像删除鼠标光标对于鼠标用户一样有害。

没有人会覆盖浏览器的默认光标，从而完全删除光标

body {
cursor: none; /* you wouldn't do this */
}

所以我们也不应该这样做，这会删除浏览器默认的轮廓

:focus {
outline: none; /* so, please don't do this */
}

或者，正如 Laura Carvajal 在2018 年 Fronteers 上所说

Laura Carvajal 配有幻灯片：你不会偷走他们的光标

即使您使用类似box-shadow的内容提供替代方案，最好将outline设置为solid transparent，因为box-shadow与高对比度模式不兼容。

良好的焦点指示器

指示焦点的其中一种方法是依赖浏览器默认值。它有效，但我建议您设计自己的焦点轮廓。这使您可以最大程度地控制它们的可视性，并允许您将它们与品牌颜色或网站的样式集成。通常，较粗的轮廓（从 2 像素开始）更好，因为它们更容易看到。

:focus伪类采用与任何其他选择器相同的 CSS 规则，因此您可以根据自己的喜好对其进行样式设置。在某些情况下，背景颜色或下划线可以指示某些内容处于活动状态。

示例

以下是 Schiphol.nl 和海牙市网站上的焦点轮廓。它们可以轻松区分链接列表中当前处于活动状态的链接。

过渡

焦点轮廓不必很无聊。outline属性可以使用 CSS 进行转换，所以为什么不添加一个微妙的动画呢？让它弹出！

对比度

在WCAG 2.1中，焦点指示器与内容的其他部分具有相同的对比度规则，如1.4.11：非文本对比度所示。这意味着轮廓与其背景之间需要 3:1 的对比度。

在具有浅色和深色部分的网站上，通常会有深色和浅色焦点样式。例如，如果您的焦点轮廓对于具有白色背景的部分（例如，主要内容区域）为蓝色，则可以将其设置为对于具有黑色背景的部分（例如，页脚）为白色。

特殊情况

聚焦非交互式元素

如前所述，焦点适用于交互式元素。在特殊情况下，聚焦非交互式元素（如<div>）是有意义的，如果该元素是刚刚打开的扩展内容或模态覆盖层的一部分。

可以使用 HTML 中的tabindex属性将任何元素添加到焦点顺序。最好将其与0或-1一起使用

• tabindex="0"：可以通过键盘和 JavaScript 将元素聚焦
• tabindex="-1"：可以通过 JavaScript 将元素聚焦，但无法通过 Tab 键切换到该元素

最好避免使用大于 0 的tabindex，因为这会设置元素在 Tab 键顺序中的优先级。如果您为一个元素设置了它，则必须在页面上的所有交互式元素上设置和维护 (!)tabindex值。另请参阅：Scott O’Hara 的积极心态很少有回报。

仅适用于键盘用户

如果您是开发人员并且设计团队不愿意应用粗体焦点样式，您可以建议仅向需要它们的使用者显示它们，例如仅向键盘用户显示。

这个“需要它们的用户”的概念有两个注意事项

• 并非所有依赖焦点样式的用户都使用键盘。我们之前提到了开关，但这只是一个用例。作为一般规则，请记住，您无法预测访问者浏览网页的所有方式。
• 使焦点样式仅限于键盘也会夺走鼠标用户的便利性，因为焦点还指示某些内容是交互式的。

出于这些原因，我们应该谨慎做出有关何时以及如何显示焦点样式的决定。幸运的是，有一种 CSS 属性是为了帮助我们解决这个问题而发明的：focus-visible。根据规范，它允许我们

提供清晰可识别的焦点样式，当用户可能需要了解焦点位置时可见，而在其他情况下不可见

换句话说：它旨在让您仅为需要它的人指示焦点。这在 Firefox（带前缀）中受支持，但在 Chromium 中尚未支持（他们打算实现），因此最好使用官方 focus-visible polyfill。最好避免使用此类启发式方法并向所有人传达焦点环，但如果必须这样做，则 focus-visible 是理想的选择。尤其是在替代方案什么都没有的情况下。

焦点样式作为键盘可访问性

对于键盘用户来说，未突出显示的聚焦元素会对可用性产生重大影响。您可以将键盘检查作为开发工作流程的一部分，以确保您不会忘记焦点指示器。例如，您可以在“完成”的定义中包含“可以使用键盘”。这是大多数团队成员在发布新功能之前应该能够进行的检查。正如我们上面所看到的，焦点样式不仅仅对键盘用户有益，但键盘操作性是测试它们的好方法。

在测试过程中，您可能会发现并非所有浏览器和平台都允许您默认情况下通过 Tab 键切换交互式元素。以下是跨平台和浏览器的一些最常见设置

• macOS：在“系统偏好设置”>“键盘”>“快捷键”下，将“完整键盘访问”设置为“所有控件”
• Safari，macOS：在“Safari”>“偏好设置”中的“高级”下，选中“按 Tab 键突出显示网页上的每个项目”
• Chrome：在 chrome://settings 中的“网页内容”下，选中“在网页上按 Tab 键会突出显示链接以及表单字段”

总结

希望这篇文章能激励您尝试仅使用键盘来使用您的（客户的）网站。也许它已经很方便使用了。如果不是，也许这篇文章会说服您或您的团队解决问题并设计一些符合品牌形象的焦点指示器。我们携手使网络对键盘、手柄和开关用户更友好。我们携手使网络为所有人服务。

焦点轮廓是设计可访问性的众多方法之一。有关在设计中考虑可访问性的更多提示，请参阅 MDN 上的UI 设计师的可访问性信息和 W3C 上的设计可访问性的提示。