焦点未被遮挡（增强版）

要求内容

2.4.11 允许部分遮挡，只要获得焦点的元素仍有可见部分即可。2.4.12 取消了这一宽限：获得焦点的元素必须完全可见。当用户通过 Tab 键将焦点移至某个按钮时，该按钮必须完整呈现在视口中，且不得有任何内容与其重叠——固定顶部导航不得遮挡按钮顶部边缘，悬浮聊天气泡不得遮挡按钮右下角。

本准则为 AAA 级，对大多数团队而言属于理想目标，但对于政府、医疗和教育领域所使用的设计系统来说，这是正确的努力方向——在这些场景中，键盘操作的可靠性不容妥协。

如何满足要求

• 在滚动容器上设置充裕的 scroll-padding-top 和 scroll-padding-bottom，其值应略大于所有固定元素高度之和。
• 当可聚焦元素靠近悬浮聊天组件时，自动隐藏聊天组件，或在焦点事件触发时将其移开。
• 对于固定底部导航栏，可考虑采用非固定替代方案，或在滚动时将其折叠，使其仅覆盖标题内容，而不遮挡交互控件。
• 对同时拥有固定顶部和固定底部导航栏的每个页面进行审计。中间的”安全区域”会迅速收窄，在小视口上尤为明显。
• 在浏览器 200% 和 400% 缩放比例下进行测试（参见成功准则 1.4.10 重排）——在 100% 比例下正常工作的固定元素，在放大后可能占满整个屏幕。

常见失败案例

• 固定顶部导航遮住了每个焦点环顶部的 4px——符合 2.4.11 但不满足 2.4.12。
• 跳过链接的目标锚点定位于 <main> 顶部，焦点环被固定顶部导航部分遮挡。
• 右下角的悬浮”帮助”按钮与该区域内获得焦点的按钮重叠了 1px 的角落。
• 由营销标签植入的促销横幅，未被设计系统的 scroll-padding 标记值所考虑。
• 移动端底部导航栏中，Tab 键聚焦到最后一个表单字段时，字段的焦点环底部边缘被略微遮挡。

为何重要

对于依赖焦点指示器追踪位置的低视力用户而言，哪怕只有一部分被遮挡，也可能使指示器实际上不可见——一个 2px 的轮廓如果顶部像素被遮住，看起来就像 1px 的线条，极易被误认为边框。增强版准则将焦点指示器视为一等 UI 元素，要求其完整的边界框均呈现在屏幕上。承诺满足 2.4.12 的团队必然会合理规划固定元素的占用空间，而这往往能改善所有用户的整体布局体验。