CSS :focus-visible 可访问焦点指示与键盘导航实践

CSS :focus-visible 可访问焦点指示与键盘导航实践概述`:focus-visible` 依据用户代理启发式在需要时显示焦点环，避免鼠标点击场景下的视觉干扰，同时保障键盘可达性。核心概念与参数`:focus-visible` 与 `:focus` 的区别：前者根据交互类型显示焦点环。`@supports selector(:focus-visible)`：为不支持浏览器提供回退。实践示例.button:focus-visible { outline: 3px solid #0ea5e9; outline-offset: 3px; } @supports not selector(:focus-visible) { .button.with-fallback:focus { outline: 3px solid #0ea5e9; outline-offset: 3px; } } 验证方法规范与支持：参考 MDN“:focus-visible”与 Can I Use 支持表，确认现代浏览器稳定支持。无障碍：对照 WCAG 2.2 非文本对比要求，校验焦点指示可见与一致性。注意事项不要移除焦点指示而不提供替代，确保键盘可用性。颜色与粗细需通过对比度要求并与全局设计系统一致。参考：MDN（:focus-visible）、CSS-Tricks 无障碍实践。