理解 CSS 中 `:focus` 和 `:focus-visible` 之间的区别-css教程-PHP中文网

理解 CSS 中 `:focus` 和 `:focus-visible` 之间的区别

Susan Sarandon

发布： 2024-11-24 07:59:12

原创

291 人浏览过

Understanding the Difference Between `:focus` and `:focus-visible` in CSS

了解 CSS 中 :focus 和 :focus-visible 之间的区别

我已经了解了键盘可访问性的重要性，所以我知道聚焦元素的视觉指示非常重要。但众所周知的 :focus 伪类并不总是最适合这项工作。这就是 :focus-visible 的用武之地。让我们看看这两个伪类之间的差异，并探索有效使用它们的最佳实践。

:focus 伪类是一个 CSS 选择器，它将样式应用于任何接收焦点的元素，无论焦点是如何触发的。这包括来自键盘导航、鼠标单击和触摸交互的焦点事件。

button:focus {
  outline: 2px solid blue;
}

登录后复制

在此示例中，只要按钮获得焦点，无论用户是使用鼠标单击它、在触摸屏上点击它还是使用键盘导航到它，该按钮都会显示蓝色轮廓。

:focus-visible 伪类更加专业。仅当浏览器确定焦点应该可见时，它才将样式应用于元素。当用户通过键盘或辅助技术而不是通过鼠标或触摸输入进行导航时，通常会发生这种情况。

button:focus-visible {
  outline: 2px solid blue;
}

登录后复制

在这里，当通过键盘导航或其他通常需要可见焦点指示器的输入方法获得焦点时，按钮只会显示蓝色轮廓。

优点：
仅在必要时显示焦点指示器，从而增强用户体验，从而为鼠标和触摸用户保持界面干净。
为键盘和辅助技术用户量身定制体验，为他们提供清晰的视觉提示。
缺点：
可能需要额外的考虑，以确保焦点指示器不会被意外省略，特别是在不支持 :focus-visible 的旧浏览器中。
- 在某些情况下，您可能希望向所有用户显示焦点指示器，无论输入法如何。

为了实现最佳的可访问性和用户体验，在 CSS 中结合使用 :focus 和 :focus-visible 通常是一个好主意。

button:focus {
  outline: 2px solid blue;
}

登录后复制

这是一个 Stackblitz 示例，展示了此类样式的外观，供您尝试和使用：

使用键盘和辅助技术进行测试：确保您的 Web 应用程序可以使用键盘（Tab、Shift Tab 等）进行导航，并且焦点指示器对于依赖它们的人是可见的。在您的 e2e 测试套件中包含可访问性测试绝不是一个坏主意。
提供清晰的焦点指示器：确保焦点指示器突出且易于看到。微妙或难以发现的焦点指示器可能会严重影响依赖键盘导航的用户的可访问性。