CSS焦点伪类：focus与focus-visible的差异和最佳实践

最近在做前端无障碍优化时，我们经常会遇到一个问题：如何恰当地显示元素的焦点状态？传统的:focus伪类虽然能为所有获得焦点的元素添加样式，但有时也会给鼠标用户带来不必要的视觉干扰。这时，focus-visible就派上了用场。那么，它们之间究竟有什么区别？又该如何正确使用呢？让我们一起深入探讨一下。

什么是:focus伪类？

首先，我们来回顾一下大家都很熟悉的:focus伪类。它是一个CSS选择器，可以应用于任何获得焦点的元素，无论焦点是如何产生的。这包括键盘导航、鼠标点击和触摸交互。简单来说，只要元素获得了焦点，:focus就会生效。

:focus的使用示例

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

上面的代码表示，无论用户是通过鼠标点击、触摸屏幕还是键盘导航，当按钮获得焦点时，都会显示一个蓝色的外边框。

什么是:focus-visible伪类？

focus-visible伪类则更智能一些。它只会在浏览器判定焦点“应该可见”时才应用样式。这种情况通常发生在用户使用键盘或辅助技术进行导航时，而不是鼠标或触摸输入。

:focus-visible的使用示例

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

这段代码的含义是，当用户通过键盘导航或其他需要可见焦点指示的输入方式使按钮获得焦点时，才会显示蓝色外边框。如果用户使用鼠标点击或触摸屏幕，则不会显示该外边框。

:focus 与 :focus-visible 的关键区别

可访问性的影响

:focus的优点是确保所有用户都能看到焦点，这对可访问性至关重要。但缺点是，它可能会给鼠标用户带来不必要的视觉干扰，因为即使鼠标点击，也会显示焦点样式。

:focus-visible的优点在于它能根据用户的输入方式提供更精准的视觉提示。对于键盘和辅助技术用户，清晰的焦点指示至关重要。而对于鼠标用户，通常不需要额外的视觉焦点提示，从而保持界面简洁。

然而，:focus-visible的挑战在于，可能需要额外的考虑，以确保焦点指示不会意外丢失，尤其是在一些较老的浏览器中，它们可能不支持:focus-visible。

:focus 和 :focus-visible 的最佳实践

为了兼顾可访问性和用户体验，我们通常会把:focus 和 :focus-visible 结合使用。

button:focus {
  outline: none; /* 移除所有交互方式的默认焦点样式 */
  /* 你可以添加一些更微妙的通用焦点样式 */
}

button:focus-visible {
  outline: 2px solid blue; /* 仅在键盘或辅助技术交互时显示外边框 */
}

这段代码首先移除了所有交互方式（包括鼠标，键盘，触摸）的默认焦点样式。然后，当元素通过键盘或辅助技术获得焦点时，我们才添加清晰的蓝色外边框。
这里有一个stackblitz示例，您可以自己动手尝试一下：
https://stackblitz.com/edit/focus-vs-focus-visible-demo?file=style.css

其他提示

• 键盘和辅助技术测试： 务必使用键盘（Tab，Shift + Tab等）测试你的Web应用程序，确保使用键盘导航的用户可以看到清晰的焦点指示。最好在你的E2E测试中加入可访问性测试。
• 提供清晰的焦点指示： 确保焦点指示足够显眼，容易被看到。一个细微或难以察觉的焦点指示会对依赖键盘导航的用户产生不利影响。
• Polyfill兼容性： 对于不支持 :focus-visible 的浏览器，可以使用polyfill来提供兼容性支持。

总结

focus-visible伪类为我们提供了一种更精细的方式来管理焦点指示，从而提升了可访问性和用户体验，尤其对于键盘和辅助技术用户。通过了解 :focus 和 :focus-visible 之间的区别，并在CSS中采用最佳实践，我们可以创建更具可访问性和用户友好的Web应用程序。

记住，可访问性绝不应是事后才考虑的事情。通过认真设计焦点样式，可以确保所有用户，无论他们如何与你的网站互动，都能轻松导航和操作。

希望本文能帮助大家更好地理解和使用 :focus 和 :focus-visible，从而打造更加人性化的Web应用。如果你在实践中遇到任何问题，欢迎在评论区留言交流。