怎样在现代CSS中使用:focus-visible优化键盘无障碍交互？-css教程-PHP中文网

在现代css中，使用 :focus-visible 伪类可以确保键盘用户看到焦点指示器，而鼠标点击时隐藏它。具体做法是将原有的 :focus 选择器替换或补充为 :focus-visible，这样浏览器会自动判断输入源是键盘还是指针设备，从而优化无障碍交互体验。

怎样在现代CSS中使用:focus-visible优化键盘无障碍交互？

`:focus-visible` 与 `:focus` 的核心区别是什么

:focus-visible 仅在用户通过键盘（如 Tab 键）导航时显示焦点样式，而 :focus 在鼠标点击和键盘操作时都会触发。这种区别避免了鼠标用户看到不必要的焦点框，同时保留了键盘用户的视觉反馈。

怎样在现代CSS中使用:focus-visible优化键盘无障碍交互？

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

上述代码展示了两种写法的对比。当使用 :focus 时，鼠标点击按钮也会显示蓝色轮廓；而使用 :focus-visible 时，只有键盘导航才会显示轮廓。实际开发中，建议优先使用 :focus-visible，并在需要兼容旧浏览器时提供 :focus 作为降级方案。

对于非原生 HTML 元素（如 div 或 span），需要手动设置 tabindex 属性使其可聚焦，然后应用 :focus-visible 样式。这样可以确保这些元素在键盘导航时也能获得正确的焦点指示。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

怎样在现代CSS中使用:focus-visible优化键盘无障碍交互？

<div tabindex="0" class="custom-btn">Click me</div>

.custom-btn:focus-visible {
  outline: 2px solid green;
  background-color: #f0f0f0;
}

这段代码演示了如何为一个自定义按钮添加 :focus-visible 支持。通过设置 tabindex="0"，该 div 元素变得可聚焦。当用户通过键盘导航到该元素时，会显示绿色轮廓和浅灰色背景，提供清晰的视觉反馈。

在表单验证场景中，:focus-visible 可以与错误状态结合使用，确保用户在键盘导航时能看到明显的错误提示。例如，当输入框验证失败时，可以为其添加红色边框和错误文本，同时在 :focus-visible 状态下增强视觉反馈。

<input type="text" id="email" required>

#email:invalid:focus-visible {
  border: 2px solid red;
  box-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
}

上述代码展示了如何在表单验证中使用 :focus-visible。当 #email 输入框内容无效且用户通过键盘导航到该元素时，会显示红色边框和阴影效果，帮助用户快速定位并修正错误。这种设计提升了表单的可用性和无障碍性。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！