Web 可访问性焦点（Accessibility Focus）

1. 基础概念
   Web 可访问性焦点是浏览器为辅助技术（如屏幕阅读器）提供的一种视觉指示机制，用于标记当前获得操作焦点的界面元素。它通常通过焦点环（focus ring）呈现，例如链接、按钮或输入框被选中时周围的虚线或实线边框。其核心作用是帮助键盘用户明确当前交互目标。

2. 技术实现原理

• CSS 焦点样式：通过 :focus 伪类定义焦点指示器，例如：

  button:focus {
    outline: 2px solid #0066ff;
    outline-offset: 2px;
  }
  

• 浏览器默认行为：不同浏览器对 outline 属性的默认渲染差异（如 Chrome 的蓝色环、Firefox 的虚线框）。
• 可访问性树同步：当焦点移动时，浏览器向辅助技术发送焦点变更事件，触发屏幕阅读器朗读元素描述。

3. 高级交互场景

• 焦点管理：在单页面应用（SPA）中，路由切换后需通过 element.focus() 主动将焦点移至新内容区域。
• 焦点陷阱：模态对话框需用 inert 属性或 JavaScript 限制焦点仅在对话框内循环。
• 跳过链接：通过隐藏的“跳过导航”链接实现键盘用户快速跳过重复内容，其触发后焦点需显式移至主体内容。

4. 可访问性标准要求

• WCAG 2.4.7：要求所有可交互元素在获得焦点时可见，焦点环颜色对比度至少达到 3:1。
• 焦点顺序：需符合 DOM 顺序与视觉逻辑一致，避免使用 tabindex>0 破坏自然流。

5. 常见问题与解决方案

• 自定义样式冲突：禁用默认 outline 时必须提供替代焦点样式，例如用 box-shadow 模拟高亮。
• 动态内容加载：使用 aria-live 区域声明异步内容更新，确保焦点移动时辅助技术及时播报。
• 复合组件焦点：如下拉菜单需通过箭头键管理子选项焦点，需实现 roving tabindex 模式。