用途:该规则用于审查样式表、组件样式与响应式状态,确保页面为键盘导航用户提供可见的自定义焦点指示器。键盘用户(运动障碍者、高级用户、使用辅助技术者)完全依赖焦点指示器判断当前位置,移除轮廓而不提供替代会让整站对键盘用户不可用。WCAG 2.4.7 要求可见焦点指示器,WCAG 2.4.13 对自定义指示器定义了更严格的尺寸与对比度目标。
主要能力:检查 CSS 中所有 outline: none、outline: 0 或 :focus { outline: none } 的实例,判断是否提供了替代的可见焦点指示器;若替代方案使用伪元素,还需确认焦点环不会被 overflow 裁剪或因缺少定位上下文而错位。
必要用法:用 :focus-visible 替代 :focus,仅在键盘导航时显示指示器;焦点指示器与相邻颜色的对比度需达到 3:1(WCAG 2.2);建议提供至少 2px 实线轮廓并带偏移量。若组件使用拉伸链接模式,需确认可见焦点环跟随实际交互元素而非父级包裹元素。
适用场景:样式表与组件样式审查、响应式状态检查、代码评审,可指出违反规则的具体选择器、声明或断点。
限制:完整实现细节、代码示例与框架专属指导见 references/rule.md;规则页为 https://frontendchecklist.io/rules/css/focus-styles。