焦点

焦点是当前接收键盘输入的活动状态。页面上任意时刻只有一个元素持有焦点，其视觉标识——焦点环——是为键盘用户、开关控制用户和屏幕阅读器用户提供的最重要的可操作线索。

焦点的重要性

相当一部分用户在浏览网页时完全不使用鼠标：

• 纯键盘用户：因运动障碍而难以或无法进行指点操作。
• 开关控制用户：通过单按钮或吸啜式设备扫描界面。
• 屏幕阅读器用户：即使在触摸屏上也通过键盘界面进行操作。
• 语音控制用户（例如”点击提交按钮”）：其工具通过匹配可聚焦元素来解析指令。

对以上所有用户而言，焦点就是光标。焦点的位置、移动方向以及外观样式，决定了页面是否可用。

WCAG 的焦点规则

WCAG 2.x 和 2.2 中有多条与焦点相关的成功准则：

• 2.1.1 键盘（A）——所有功能必须可通过键盘操作。
• 2.1.2 不影响键盘使用（A）——键盘用户必须能仅使用键盘将焦点从任意可聚焦元素上移走。
• 2.4.3 焦点顺序（A）——焦点顺序必须符合逻辑且有意义。
• 2.4.7 焦点可见（AA）——被聚焦的元素必须具有可见的焦点指示器。
• 2.4.11 焦点不被遮挡（AA，WCAG 2.2 新增）——粘性页头、Cookie 横幅和浮动聊天组件不得完全遮蔽被聚焦的元素。
• 2.4.13 焦点外观（AAA，2.2 新增）——焦点指示器必须满足特定的面积和对比度阈值。

常见失效模式

• outline: none 且无替代样式。 设计师为匹配视觉风格去除了默认焦点环，却忘记用自定义样式替代。这是 AA 级别最常见的合规失效。
• 仅在 :focus-visible 上设置焦点样式，而非 :focus。 现代最佳实践使用 :focus-visible，使焦点环仅在键盘导航时显示，而非鼠标点击时。这一做法本身没有问题，但 :focus-visible 上的指示器仍需满足 AA 对比度要求。
• 动态操作后焦点丢失。 关闭模态框后，焦点必须返回触发元素；删除某行后，焦点必须移至合理的相邻元素。否则用户会落在不确定的位置（通常是文档正文），不得不从页面顶部重新开始 Tab 导航。
• 焦点被粘性页面元素遮蔽。 距页面顶部 50 像素的聚焦链接被同样 50 像素高的粘性页头遮挡，用户在看似空白处按 Tab 键。解决方法：将 scroll-padding-top 设为页头高度，或检测遮挡并将聚焦元素滚动至可见区域。

最快速的手动审计方式

从地址栏到页面底部，依次用 Tab 键浏览每个页面。若在任意位置无法看到焦点所在、无法到达某个可交互控件，或陷入焦点陷阱，则该页面不符合 2.4.7 或 2.1.2 的要求。