焦点不被遮挡（最低要求）

要求内容

当用户通过 Tab 键移动到某个控件时，该控件至少有一部分必须保持可见。最常见的失败情形：用户通过 Tab 键向下移动经过粘性页眉，页面自动滚动后，获得焦点的链接落到粘性栏后方，用户无法再看到焦点环。该控件仍然获得焦点，仍然响应 Enter 键操作，但用户对此毫不知情。

本成功准则设定的是最低标准：获得焦点的元素可以被部分遮挡，但不得被完全遮挡。AAA 级别的 2.4.12 将标准提高为”完全不被遮挡”。

这是 WCAG 2.2 新增的四项可操作性成功准则之一，影响尤为深远——因为粘性页眉、粘性页脚、Cookie 横幅和聊天组件气泡已随处可见。

如何满足

• 为可获得焦点的元素添加 CSS scroll-margin-top，其值等于粘性页眉的高度，使浏览器在元素获得焦点时自动将其滚动至页眉下方。
• 对于粘性页脚和聊天气泡，确保它们不会完全遮挡任何可获得焦点的元素。可在元素获得焦点时缩小它们，或以留有边距的方式固定位置。
• Cookie 横幅和可关闭的覆盖层：切勿以固定方式覆盖后续的 Tab 停留点。可将其设为模态（带焦点陷阱）或非阻塞式。
• 对于同时具有粘性页眉和粘性页脚的页面，在视口垂直中心附近测试 Tab 顺序——这是获得焦点的元素最容易被压缩的区域。
• 对旧版浏览器使用 scroll-padding-top 作为滚动容器的降级方案。

html { scroll-padding-top: 80px; }       /* 与粘性页眉高度一致 */
:target, :focus { scroll-margin-top: 80px; }

常见失败情形

• 粘性页眉未进行滚动内边距补偿：每次 Tab 到视口上半部分时，焦点环都会被遮挡。
• Cookie 同意横幅固定在底部，当表单字段获得焦点时遮挡最后一行字段。
• 实时聊天组件气泡位于右下角，与表单角落的”提交”按钮重叠。
• 市场团队添加的促销粘性横幅（如”黑色星期五”横幅），未同步更新 scroll-padding 相关变量。
• 仪表盘中的粘性表格标题行，Tab 到第一行数据时焦点落在标题行后方。

重要性

本成功准则修复了一类键盘用户每天都会遭遇的缺陷，但自动化扫描工具几乎无法发现——没有任何 axe 规则能预测在何种滚动位置粘性元素会遮挡获得焦点的元素。此外，这一问题对屏幕放大镜用户的影响尤为突出：其可见视口已缩小至屏幕的四分之一，粘性元素占据的比例因此更大。

预计 2.4.11 将成为 2026 年审计报告中被引用最频繁的新发现之一。修复方案并不复杂（仅需几个 CSS 变量），但需要每个负责粘性元素——页眉、页脚、横幅、组件——的团队协调配合。