无需登录 数据私有 本地保存

焦点指示器可见性检查 - 模拟键盘 Tab 导航轮廓

可访问性 开发工具 可访问性 检查 焦点 键盘
21
0
0
0

焦点指示器可见性检查

模拟键盘 Tab 导航，检测焦点轮廓（Focus Outline）是否可见，提升无障碍访问体验。

模拟UI区域 0 个可聚焦元素
登录账户
偏好设置
帮助文档
点击按钮模拟键盘Tab导航
焦点检测信息

点击「模拟 Tab」按钮
或直接在模拟区域按 Tab 键开始检测

#1 当前焦点元素
元素标签-
元素类型-
outline-style-
outline-width-
outline-color-
outline-offset-
box-shadow-
评估： -

元素焦点可见性扫描报告 等待扫描
# 元素 标签/类型 outline状态 可见性 备注
点击「扫描全部」按钮生成报告

常见问题

焦点指示器是浏览器在元素获得键盘焦点（通常通过 Tab 键）时显示的视觉提示，最常见的形式是元素周围的轮廓线（outline）。它帮助键盘用户和辅助技术用户了解当前交互位置。WCAG 2.1 准则 2.4.7 要求所有可交互元素在获得焦点时必须有清晰可见的焦点指示器。

常见原因包括：① CSS 中使用了 outline: none 或 outline: 0；② 使用了 :focus { outline: none } 但忘记提供替代的焦点指示器；③ outline-color 设置为透明色；④ 被其他元素遮挡导致outline不可见。如果去除outline，必须提供其他高对比度的视觉替代方案（如 box-shadow、边框颜色变化等）。

:focus 在元素通过任何方式（鼠标点击、触摸、键盘Tab）获得焦点时都会触发，可能导致鼠标用户看到不必要的焦点轮廓。而 :focus-visible 是更智能的伪类，浏览器只在键盘导航时显示焦点指示器，鼠标点击时则不显示。推荐使用 :focus-visible 来提供更优雅的用户体验，同时保持良好的无障碍支持。

使用 box-shadow 是常见的outline替代方案。推荐写法：
:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(66,133,244,0.5); }
box-shadow 不会影响元素布局（不像outline可能被overflow裁剪），且可以实现更美观的圆角焦点环。但务必确保对比度足够（至少3:1），且焦点环宽度至少2-3px。

WCAG 2.1 成功标准 2.4.7（焦点可见）要求：任何可键盘操作的用户界面组件，在获得焦点时都应具有可见的焦点指示器（级别AA）。WCAG 2.2 的成功标准 2.4.13（焦点外观）进一步要求焦点指示器至少有2px厚度、与背景有至少3:1的对比度、与相邻颜色有足够的区分度。简言之：焦点轮廓不能太细、不能太淡、不能被隐藏。

最佳方法是亲自使用键盘：打开网页后，不断按 Tab 键浏览所有可交互元素，观察每个元素是否有清晰可见的焦点指示器。也可以使用浏览器DevTools检查元素的:focus状态样式、使用Lighthouse进行无障碍审计、或使用像本工具这样的焦点检查器来辅助检测。特别注意弹窗、下拉菜单等动态内容中的焦点管理。
🔧 相关工具