了解 css 中 :focus 和 :focus-visible 之间的区别
我已经了解了键盘可访问性的重要性，所以我知道聚焦元素的视觉指示非常重要。但众所周知的 :focus 伪类并不总是最适合这项工作。这就是 :focus-visible 的用武之地。让我们看看这两个伪类之间的差异，并探索有效使用它们的最佳实践。
什么是 :focus 伪类？
:focus 伪类是一个 css 选择器，它将样式应用于任何接收焦点的元素，无论焦点是如何触发的。这包括来自键盘导航、鼠标单击和触摸交互的焦点事件。
:focus 的用法示例
button:focus {
outline: 2px solid blue;
}
在此示例中，只要按钮获得焦点，无论用户是使用鼠标单击它、在触摸屏上点击它还是使用键盘导航到它，该按钮都会显示蓝色轮廓。
什么是 :focus-visible 伪类？
:focus-visible 伪类更加专业。仅当浏览器确定焦点应该可见时，它才将样式应用于元素。当用户通过键盘或辅助技术而不是通过鼠标或触摸输入进行导航时，通常会发生这种情况。
立即学习“前端免费学习笔记（深入）”；
:focus-visible 的用法示例
button:focus-visible {
outline: 2px solid blue;
}
在这里，当通过键盘导航或其他通常需要可见焦点指示器的输入方法获得焦点时，按钮只会显示蓝色轮廓。
:focus 和 :focus-visible 之间的主要区别
：重点
- 行为： 适用于任何接收焦点的元素，无论输入法如何。
- 用例：确保与元素的所有交互都以视觉方式指示，无论是通过鼠标、键盘还是触摸。
:焦点-可见
- 行为： 仅当焦点可见时应用样式，例如使用键盘或辅助技术。
- 用例：非常适合您只想向键盘和辅助技术用户提供焦点指示器，同时避免为鼠标和触摸用户提供不必要的轮廓（通常是设计所需的）的场景。
无障碍影响
：重点
- 优点：
- 保证所有用户都可以看到某个元素何时获得焦点，这对于可访问性至关重要。
- 缺点：
- 可能会导致鼠标用户的体验不佳，因为在鼠标交互过程中可能会出现不必要的焦点样式。
:焦点-可见
- 优点：
- 仅在必要时显示焦点指示器，从而增强用户体验，从而为鼠标和触摸用户保持界面干净。
- 为键盘和辅助技术用户定制体验，为他们提供清晰的视觉提示。
- 缺点：
- 可能需要额外考虑，以确保焦点指示器不会意外省略，特别是在不支持 :focus-visible 的旧浏览器中。
- 在某些情况下，您可能希望向所有用户显示焦点指示器，无论输入法如何。
使用 :focus 和 :focus-visible 的最佳实践
为了实现最佳的可访问性和用户体验，在 css 中结合使用 :focus 和 :focus-visible 通常是一个好主意。
结合 :focus 和 :focus-visible
button:focus {
outline: none; /* Remove default focus for all interactions */
/* maybe some subtle general focus style */
}
button:focus-visible {
outline: 2px solid blue; /* Only show outline when the element was interacted with via keyboard or assistive technology */
}
这是一个 stackblitz 示例，展示了此类样式的外观，供您尝试和使用：
额外提示
- 使用键盘和辅助技术进行测试： 确保您的 web 应用程序可以使用键盘（tab、shift + tab 等）进行导航，并且焦点指示器对于依赖它们的人是可见的。在您的 e2e 测试套件中包含可访问性测试绝不是一个坏主意。
- 提供清晰的焦点指示器：确保焦点指示器突出且易于看到。微妙或难以发现的焦点指示器可能会严重影响依赖键盘导航的用户的可访问性。
结论
:focus-visible 伪类提供了一种更精细的方式来管理焦点指示器，提高可访问性和用户体验，特别是对于键盘和辅助技术用户。通过了解 :focus 和 :focus-visible 之间的差异，并在 css 中应用最佳实践，您可以创建更易于访问和用户友好的 web 应用程序。
记住，可访问性永远不应该是事后的想法。通过深思熟虑地应用焦点样式，您可以确保所有用户，无论他们如何与您的网站交互，都可以轻松导航和交互。
