CSS如何为无障碍阅读器设定焦点样式-css教程-PHP中文网

:focus-visible 更可靠，因它仅在键盘操作（如Tab）触发焦点时生效，避免鼠标点击时出现干扰性轮廓线；但需JS降级支持旧浏览器，并配合tabindex="0"确保自定义元素可聚焦。

css如何为无障碍阅读器设定焦点样式

focus-visible 为什么比 :focus 更可靠

因为默认的 :focus 会在鼠标点击后也触发，导致很多用户看到“莫名其妙的轮廓线”。这不是 bug，是浏览器原生行为——只要元素获得焦点（不管怎么获得），:focus 就匹配。但无障碍用户依赖键盘导航，他们才真正需要可见焦点；鼠标用户不需要，甚至会觉得干扰。

用 :focus-visible 能自动区分：只有键盘操作（Tab、Shift+Tab、方向键等）触发焦点时才生效，鼠标或触摸操作则不显示。不过它不是所有浏览器都支持，尤其旧版 Safari 和 IE 完全不认。

Chrome 86+、Firefox 84+、Edge 89+ 原生支持 :focus-visible
Safari 15.4+ 开始支持，但需开启实验性功能（部分系统仍不稳定）
没支持时，浏览器会忽略整条规则，不会报错，但焦点样式就没了
别用 :focus:not(:focus-visible) 反向隐藏——这在不支持的浏览器里会让所有焦点都不可见

如何安全降级到 :focus + JS 检测

只靠 CSS 无法在不支持 :focus-visible 的环境里精准判断输入方式。必须配合 JS 监听 keydown 和 mousedown，动态加 class 控制样式。核心逻辑是：一旦检测到键盘操作，就给 document 加一个标记类，让 CSS 有条件启用焦点样式。

示例做法：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

document.addEventListener('keydown', () => {
  document.body.classList.add('keyboard-focus');
});
document.addEventListener('mousedown', () => {
  document.body.classList.remove('keyboard-focus');
});

对应 CSS：

.keyboard-focus button:focus,
.keyboard-focus a:focus,
.keyboard-focus [tabindex]:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

不要监听 focus 事件来判断——它本身不携带输入源信息
监听 keydown 比监听 keyup 更及时，避免首次 Tab 按下时样式延迟
移除 keyboard-focus 类的时机要谨慎：mousedown 是最稳妥的选择，click 有延迟且可能漏掉右键
这个 class 最好加在 body 上，而不是每个元素单独处理，性能和维护成本更低

outline 和 box-shadow 哪个更适合做焦点样式

outline 是传统方案，但它绕过布局、不占空间、无法圆角，而且在高对比度模式下可能被系统强制覆盖。而 box-shadow 可控性强，能做圆角、内阴影、多层效果，还能避开高对比度模式干扰——前提是不用 outline: none 彻底干掉原生 outline。

必须保留 outline: none 吗？不一定。如果用 box-shadow 替代，可以留着原生 outline 作为兜底（比如在高对比度模式下）
推荐写法：outline: 2px solid transparent; box-shadow: 0 0 0 2px #0066cc; ——既满足可访问性检测工具对 outline 的要求，又用 shadow 实现视觉样式
避免用 border：它会改变元素尺寸，引发布局偏移，对按钮、链接这类内联元素尤其危险
注意颜色对比度：WCAG 要求焦点指示器与周围背景对比度 ≥ 3:1，深色背景上慎用浅灰