焦点外观

要求内容

2.4.7（焦点可见）要求焦点指示器必须存在。2.4.13（焦点外观）则明确规定其外观标准。要通过本准则，焦点指示器必须满足以下条件：

1. 面积至少相当于围绕获得焦点的控件的 2 个 CSS 像素实线边框所覆盖的区域，或等效面积的 1px 厚线条。
2. 同一像素在聚焦与未聚焦状态之间的对比度达到 3:1。
3. 不被其他内容遮挡（这也属于 2.4.11 / 2.4.12 的要求范围）。

这是 WCAG 首次对焦点样式给出具体数值，已深刻影响设计系统处理键盘样式的方式。预计 2026 年的每次无障碍审计都会明确提及本准则。

如何满足要求

• 使用至少 2px 厚的实线轮廓。常见写法：outline: 2px solid currentColor; outline-offset: 2px;。
• 选择焦点颜色时，需确保与相邻颜色的对比度达到 3:1，而非仅与页面背景对比——按钮可能处于悬停状态、渐变背景或图片上方。
• 深色模式和浅色模式各自提供一套焦点颜色，通过 prefers-color-scheme 或标记主题切换。
• 避免使用对比度不足的发光效果或 box-shadow 光环；若使用 box-shadow，需确保边缘清晰且厚度足够。
• 优先使用 :focus-visible，使鼠标用户不会看到焦点环，但同时确保所有键盘聚焦——包括程序化聚焦——均能触发焦点环显示。

:focus-visible {
  outline: 2px solid #1d4ed8;       /* 与白色及灰色悬停状态对比度达 3:1 */
  outline-offset: 2px;
  border-radius: inherit;
}

常见失败案例

• 1px 焦点环（大多数 2023 年以前的浏览器默认样式及组件库）。
• 在品牌蓝色按钮悬停状态上使用品牌蓝色焦点环——颜色完全相同，对比度 1:1。
• 焦点样式仅使用边缘模糊的 box-shadow，在有图案的背景上消失不见。
• 自定义输入框的焦点状态仅改变边框颜色，而不改变厚度或对比度——过于微妙，不符合要求。
• 小图标按钮使用内嵌焦点环，绘制在 16×16 命中区域内部，最终被图标字形遮挡而不可见。
• 组件在白色背景上通过测试，但在从未测试过的深色模式变体上失败。

实用对比度检查清单

对每个交互式组件，列出其所有可能所处的表面状态（默认、悬停、按下、禁用、在卡片内、在模态框内、在主视觉图片上），并验证焦点环在每种状态下均达到 3:1 对比度。这项工作较为繁琐；不做这项工作的组件库往往会存在隐性缺陷。在 Storybook 中集成 pa11y 或 axe-playwright 自动化测试，回报丰厚。

为何重要

2.4.13 弥补了 2.4.7 中最常见的漏洞：焦点环从技术层面确实存在，但过细、对比度过低或位置被遮挡，实际上毫无用处。依赖焦点环追踪焦点位置的低视力用户，终于获得了可量化、可测试的保障。设计师也得到了一条明确的规则，可以在发布前验证，而无需在事后协商。

即使是正式仅承诺达到 AA 级的团队，也在广泛采用 2.4.13 作为目标——因为失败案例在审计中容易发现，也容易成为诉讼的依据。如果你只从 WCAG 2.2 中采用一条 AAA 级成功准则，就选这条。