CSS伪类:focus-visible在无障碍访问中的核心价值

:focus-visible 不是 :focus 的替代品，因为它仅在键盘导航时激活样式以避免鼠标点击后突兀显示焦点框；需分层处理控件语义，配合兜底写法和无障碍验证确保兼容性与可访问性。

为什么 :focus-visible 不是:focus的替代品

它只在用户明确依赖键盘导航时才激活样式，避免鼠标点击后意外出现焦点框。浏览器通过内部启发式判断操作方式——比如按Tab、Shift+Tab、Ctrl+F7等触发键盘导航行为时，:focus-visible 才会生效；单纯用鼠标点按钮，:focus 仍有，但 :focus-visible 不匹配。

常见错误现象：button:focus { outline: 2px solid blue; } 导致鼠标点击后蓝框突兀闪现，干扰视觉；换成 button:focus-visible { outline: 2px solid blue; } 后，鼠标用户完全无感知，键盘用户却获得清晰路径。

• 不能靠 js 模拟判断是否“键盘触发”，浏览器的启发式逻辑不公开，也不稳定
• :focus-visible 在 safari 15.4+ 才原生支持，旧版需 postcss-focus-visible 或 focus-visible polyfill
• 若同时写 button:focus 和 button:focus-visible，后者优先级更高（同选择器权重下，后声明覆盖前）

如何安全启用 :focus-visible 而不破坏现有焦点逻辑

直接替换所有 :focus 为 :focus-visible 是高危操作——表单控件（如 input、textarea）在获得焦点时，即使由鼠标触发，也应有视觉反馈（例如光标闪烁+边框高亮），否则用户无法确认输入位置。

实操建议：分层处理，按控件语义区别对待：

立即学习“前端免费学习笔记（深入）”；

• 可操作控件（button、a[href]、summary）→ 用 :focus-visible 控制焦点指示器
• 文本输入类（input、textarea、select）→ 保留 :focus，确保光标可见性与输入态提示不丢失
• 自定义组件（如用 div[role="button"] 实现的按钮）→ 必须手动加 tabindex="0"，且仅响应 :focus-visible，否则键盘用户无法聚焦

:focus-visible 的兼容性陷阱和兜底方案

chrome 和 firefox 默认启用，但 Safari 直到 15.4 才支持，且部分 android webview 完全不识别。更麻烦的是：当浏览器不支持时，:focus-visible 规则整条被忽略，不会回退到 :focus —— 这意味着键盘用户在旧环境里彻底失去焦点指示。

正确兜底不是靠 @supports 做条件加载，而是用「渐进增强」写法：

button:focus {   outline: none; } button:focus-visible {   outline: 2px solid #0066cc; }

这样，不支持 :focus-visible 的浏览器仍走 :focus 分支（你得自己控制它是否显示）；支持的浏览器则用 :focus-visible 精准接管。

• 别写 button:focus:not(:focus-visible) { outline: none; } —— 逻辑反直觉，且在不支持 :focus-visible 的环境里整条规则失效，:focus 依然生效
• CSS 预处理器（如 sass）无法解决运行时支持判断，必须靠原生 CSS 层叠顺序控制
• 测试时务必用真实键盘 Tab 导航，禁用鼠标，验证焦点流是否连续、指示是否出现

无障碍测试中容易被忽略的关键点

:focus-visible 解决的只是“什么时候显示焦点框”，但它不保证焦点框本身是否足够可见。WCAG 2.1 要求焦点指示至少 3:1 对比度、宽度 ≥ 2px、包围整个交互区域。

这意味着即使用了 :focus-visible，如果只改了个浅灰色边框或加了透明度，键盘用户依然可能看不见。更隐蔽的问题是：某些 ui 库（如 bootstrap、Material UI）默认焦点样式在深色主题下对比度不足，或被父容器 overflow: hidden 截断。

• 用浏览器 DevTools 的「Accessibility」面板检查焦点节点的 outline 是否实际渲染且未被裁剪
• 切到系统级高对比度模式（windows 设置 / macos 辅助功能）下验证，部分系统会强制重置 outline，此时需用 outline-style: auto 或 box-shadow 替代
• 移动端 Safari 对 :focus-visible 支持不稳定，常需配合 ontouchstart 事件临时移除 focus 样式，但该 hack 会影响辅助技术识别

真正难的不是加一行 :focus-visible，而是让它的表现始终符合人手可触、眼力可辨、工具可读的三重约束。