最近在做前端无障碍优化时，我们经常会遇到一个问题：如何恰当地显示元素的焦点状态？传统的:focus伪类虽然能为所有获得焦点的元素添加样式，但有时也会给鼠标用户带来不必要的视觉干扰。这时，focus-visible就派上了用场。那么，它们之间究竟有什么区别？又该如何正确使用呢？让我们一起深入探讨一下。
什么是:focus伪类？
:focus的使用示例
button:focus{outline:2pxsolidblue;}什么是:focus-visible伪类？
focus-visible伪类则更智能一些。它只会在浏览器判定焦点“应该可见”时才应用样式。这种情况通常发生在用户使用键盘或辅助技术进行导航时，而不是鼠标或触摸输入。
:focus-visible的使用示例
button:focus-visible{outline:2pxsolidblue;}:focus与:focus-visible的关键区别
特性
:focus
:focus-visible
行为
对任何获得焦点的元素应用样式
仅在焦点应该可见时应用样式
使用场景
确保所有交互方式都有视觉指示（鼠标，键盘，触摸）
主要为键盘和辅助技术用户提供焦点指示，避免鼠标用户的干扰
可访问性
确保所有用户都能看到焦点，但可能不适用于鼠标用户
为键盘用户提供清晰的焦点提示，同时保持界面整洁
浏览器兼容性
兼容性好
兼容性不如:focus，需要polyfill（垫片）支持
可访问性的影响
:focus-visible的优点在于它能根据用户的输入方式提供更精准的视觉提示。对于键盘和辅助技术用户，清晰的焦点指示至关重要。而对于鼠标用户，通常不需要额外的视觉焦点提示，从而保持界面简洁。
然而，:focus-visible的挑战在于，可能需要额外的考虑，以确保焦点指示不会意外丢失，尤其是在一些较老的浏览器中，它们可能不支持:focus-visible。
:focus和:focus-visible的最佳实践
为了兼顾可访问性和用户体验，我们通常会把:focus和:focus-visible结合使用。
button:focus{outline:none;/*移除所有交互方式的默认焦点样式*//*你可以添加一些更微妙的通用焦点样式*/}button:focus-visible{outline:2pxsolidblue;/*仅在键盘或辅助技术交互时显示外边框*/}这段代码首先移除了所有交互方式（包括鼠标，键盘，触摸）的默认焦点样式。然后，当元素通过键盘或辅助技术获得焦点时，我们才添加清晰的蓝色外边框。
这里有一个stackblitz示例，您可以自己动手尝试一下：
其他提示
键盘和辅助技术测试：务必使用键盘（Tab，Shift+Tab等）测试你的Web应用程序，确保使用键盘导航的用户可以看到清晰的焦点指示。最好在你的E2E测试中加入可访问性测试。
提供清晰的焦点指示：确保焦点指示足够显眼，容易被看到。一个细微或难以察觉的焦点指示会对依赖键盘导航的用户产生不利影响。
Polyfill兼容性：对于不支持:focus-visible的浏览器，可以使用polyfill来提供兼容性支持。
总结
focus-visible伪类为我们提供了一种更精细的方式来管理焦点指示，从而提升了可访问性和用户体验，尤其对于键盘和辅助技术用户。通过了解:focus和:focus-visible之间的区别，并在CSS中采用最佳实践，我们可以创建更具可访问性和用户友好的Web应用程序。
记住，可访问性绝不应是事后才考虑的事情。通过认真设计焦点样式，可以确保所有用户，无论他们如何与你的网站互动，都能轻松导航和操作。
