焦点可见

要求内容

每当任何交互元素获得键盘焦点时，浏览器——或页面的 CSS——必须渲染一个可见指示器，显示哪个元素处于焦点状态。本成功准则不规定指示器的外观，那是 AAA 级别 2.4.13 的职责。它只要求某种内容是可见的。最典型的失败是 *:focus { outline: none; } 且没有任何替代样式。

本成功准则适用于所有可获焦的元素：链接、按钮、表单输入、自定义组件、iframe，以及任何带有 tabindex 的元素。无论用户是通过 Tab、Shift+Tab 还是程序性焦点调用到达该元素，均适用。

如何满足

• 绝不在没有即时替代方案的情况下写 outline: none（或 outline: 0）。如果希望仅对鼠标点击抑制自定义聚焦环，可使用 :focus-visible 将其范围限定为仅键盘用户。
• 提供对比度和厚度足够明显的焦点样式：相对于相邻背景达到 3:1 对比度的 2px 实线边框是保守的基准。
• 对于浅色背景上的浅色控件，使用深色聚焦环（反之亦然）。灰色悬停状态上的灰色边框是经典的不可见陷阱。
• 自定义组件（combobox、listbox、menu）必须将焦点移动到活动选项并在其上渲染可见指示器。
• 通过从地址栏开始用 Tab 键遍历整个页面来进行测试。每个停留位置都必须无需眯眼即可明显看到。

常见失败

• 全局重置：基础 CSS 中存在 *:focus { outline: none; }，且从未重新添加。
• 组件库附带 1px 低对比度边框，颜色与英雄渐变区域的品牌色一致——实际上不可见。
• 焦点指示器在滚动时被固定标头遮挡（参见 2.4.11——根本原因相同，但属于不同的成功准则）。
• 按钮在 :hover 时改变背景颜色，但 :focus 时没有变化，导致键盘用户完全收不到信号。
• 自定义下拉菜单中焦点移动到屏幕外隐藏的 <li>，视觉上毫无变化。
• 设计师用微小阴影替代聚焦环，在复杂背景上不可见。

:focus-visible 的作用

浏览器提供 :focus-visible 以区分键盘焦点与鼠标焦点。参考模式：

:focus { outline: none; }
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

这使鼠标点击保持简洁，同时为键盘用户提供指示器。截至 2026 年，可安全在所有现代浏览器中使用。

重要性

「焦点可见」是键盘无障碍审计中被引用最多的单项成功准则——可以说也是影响最大的一项。一个不符合 2.4.7 的网站对键盘用户来说是完全无法使用的，即使其他所有成功准则均通过。有运动障碍的用户、使用放大镜的视觉障碍用户，以及手部受伤的用户都会失去访问能力。使用外接蓝牙键盘的平板电脑用户也面临同样的障碍。修复此问题通常只需一条 CSS 规则，这使得该问题在整个网络上持续存在显得格外令人遗憾。