Web 可访问性焦点指示器（Accessibility Focus Indicator）

1. 焦点指示器的基本定义
   焦点指示器是网页中可见的视觉提示，用于标记当前获得键盘焦点的交互元素（如链接、按钮、输入框）。它通常表现为环绕元素的边框、高亮背景或阴影效果，例如浏览器默认的蓝色虚线或实线边框。焦点指示器帮助用户通过键盘（如 Tab 键）导航时明确当前位置，尤其对依赖键盘操作的视障用户或运动障碍用户至关重要。

2. 焦点指示器的工作原理
   当用户使用 Tab 键遍历页面时，浏览器会通过内置样式为焦点元素应用默认指示器。其实现依赖于 CSS 伪类 :focus。例如：

   button:focus {
     outline: 2px solid blue; /* 默认蓝色边框 */
   }
   

   浏览器会计算焦点顺序（基于 DOM 结构），并通过渲染引擎动态应用样式。此外，ARIA 属性（如 aria-hidden）可控制指示器对辅助技术的暴露方式。

3. 自定义焦点指示器的设计规范
   为保持可访问性，自定义指示器需满足：

   • 对比度：与背景颜色对比度至少达到 3:1（WCAG 2.1 Level AA 标准）。
   • 尺寸：边框厚度至少 1px，或使用不小于 2px 的偏移阴影。
   • 禁用默认样式：若移除浏览器默认 outline，必须提供替代样式（如 box-shadow 或 background-color 变化）。
   • 状态反馈：结合 :focus-visible 伪类区分鼠标与键盘操作，避免对鼠标用户造成干扰。

4. 高级实现与 ARIA 集成
   对于复杂组件（如下拉菜单），需通过 JavaScript 动态管理焦点：

   • 使用 element.focus() 方法以编程方式控制焦点。
   • 通过 tabindex 属性调整焦点顺序（例如 tabindex="0" 使 div 可聚焦）。
   • 结合 ARIA 实时区域（aria-live）通知屏幕朗读器焦点变化。例如：

     <div aria-live="polite" id="focus-announcer"></div>
     <script>
       document.addEventListener('focus', (e) => {
         document.getElementById('focus-announcer').textContent = `焦点已移至 ${e.target.innerText}`;
       }, true);
     </script>
     

5. 测试与兼容性验证

   • 工具检测：使用浏览器开发者工具检查 :focus 样式，或通过 Lighthouse 审核焦点可见性。
   • 键盘测试：全程使用 Tab 键遍历页面，验证指示器是否清晰且无焦点丢失。
   • 屏幕朗读器配合：在 NVDA/JAWS 中监听焦点播报，确保视觉与听觉反馈一致。
   • 跨浏览器支持：针对不同浏览器（如 Firefox 的粗虚线、Chrome 的蓝框）调整样式，并测试高对比度模式下的显示效果。