现在花两分钟在浏览器中访问您当前的项目。然后，仅使用Tab键，您应该能够在交互元素之间导航，包括按钮、链接和表单元素。
如果您有视力，您应该能够在焦点在 DOM 中的元素之间跳转时在视觉上跟随焦点。但是，如果您没有看到任何视觉变化，或者只是几乎不明显的视觉变化，那么您已经找到了可以为访问者带来巨大改变的一件事。
我们将研究一种通过使用 CSS 自定义属性使您的焦点样式在您的项目中更易于管理的技术，并了解现代 CSS 焦点选择器。但首先，让我们更多地了解为什么可见焦点样式很重要。
满足 WCAG 焦点风格标准
可见焦点状态包含在 Web 内容可访问性指南 (WCAG) 成功标准 2.4.7 – 焦点可见中。2.4.7的理解文档在此标准的意图中陈述了以下内容：
这个成功标准的目的是帮助人们知道哪个元素具有键盘焦点。人们必须有可能知道多个元素中的哪个元素具有键盘焦点。
在即将到来的 WCAG 2.2 中，将添加一个新标准来阐明“焦点指示器的可见性”。虽然目前处于草稿阶段，但熟悉并应用2.4.11 – 焦点外观（最低限度）中的指南绝对是您今天可以采取的改善焦点风格的积极步骤。
使用 CSS 自定义属性管理焦点样式
我今年开始使用的一项技术是在我的级联早期的主要基本交互元素上包含以下设置：
:is(a, button, input, textarea, summary) {
--outline-size: max(2px, 0.08em);
--outline-style: solid;
--outline-color: currentColor;
}
:is(a, button, input, textarea, summary):focus {
outline: var(--outline-size) var(--outline-style) var(--outline-color);
outline-offset: var(--outline-offset, var(--outline-size));
}
这附加了自定义属性，允许您根据需要灵活地自定义大纲样式的一部分，以确保焦点在元素的上下文更改时保持可见。
对于--outline-size，我们max()用于确保至少 的值2px，同时允许相对于基于 的组件（例如，大按钮或标题中的链接）进行缩放0.08em。
您可能在这里不熟悉的一个属性是outline-offset定义元素和轮廓之间的空间。您甚至可以提供负数来插入轮廓，这对于确保焦点样式的对比度非常有用。在我们的规则集中，我们将该属性设置为接受一个可选的自定义属性，--outline-offset以便可以在需要时对其进行自定义，否则它具有与--outline-size.
轮廓外观的改进
在我的职业生涯中，我都被要求删除轮廓并自己删除它们，因为它们被认为是“丑陋的”。
现在有两个原因outline绝对不应该被删除（除了可访问性影响）：
-
outline现在跟随border-radius在 Chromium 和 Firefox 中！🎉 这意味着您可以考虑删除您可能使用过的任何技巧，例如用 a 伪造它box-shadow（这对确保 Windows 高对比度主题用户不会删除焦点样式具有另一个积极的可访问性影响）。 - 使用
:focus-visible我们可以要求浏览器使用启发式方法仅在检测到需要可见焦点的输入模式时才显示焦点样式。简化了，这意味着鼠标用户在点击时不会看到它们，键盘用户仍然会在选项卡上看到它们。
重要的是要注意form元素总是显示焦点样式——它们不受:focus-visible.
因此，让我们增强我们的规则集，将以下内容添加到 include:focus-visible中。我们将保留:focus我们已经为旧浏览器定义的初始样式，以免丢失以防万一。
:is(a, button, input, textarea, summary):focus-visible {
outline: var(--outline-size) var(--outline-style) var(--outline-color);
outline-offset: var(--outline-offset, var(--outline-size));
}
由于浏览器抛出他们不理解的选择器的方式，我们确实需要制定这些单独的规则而不是将它们组合起来，即使它们定义了相同的outline属性。
最后，我们还需要这种看起来很有趣的:focus:not(:focus-visible)规则，为支持的浏览器移除常规的焦点样式:focus-visible：
:is(a, button, input, textarea, summary):focus:not(:focus-visible) {
outline: none;
}
值得注意的是，最新版本的 Chromium 和 Firefox 已切换为:focus-visible将焦点样式应用于交互元素的默认方式，并且最近才在 webkit 中启用为默认方式，因此它应该很快在 Safari 中稳定！我们的规则仍然有效，因为我们正在自定义outline外观。
有关可见焦点样式的更多指导，我推荐 Sara Soueidan 令人惊叹且彻底的焦点指标指南，因为它考虑了即将到来的 2.4.11 标准。
焦点样式演示
这支笔展示了这些交互元素中的每一个的示例，以及如何使用自定义属性应用自定义，包括一些暗模式的交换。根据您的浏览器支持，:focus-visible除非您使用 Tab 键，否则您可能看不到焦点样式。
最后一点：button当涉及到焦点样式时，它是一种独特的交互元素，因为它在其状态中具有额外的考虑因素，特别是如果您仅依赖颜色。如需帮助，请尝试我的项目ButtonBuddy.dev中的调色板生成器。
