Web 可访问性焦点管理（Accessibility Focus Management）

1. 基础概念
   Web 可访问性焦点管理是指通过编程方式控制键盘焦点在页面元素间的移动，确保用户（尤其是依赖键盘或辅助技术的用户）能够按逻辑顺序访问交互元素。焦点通常通过 Tab 键切换，默认顺序由 HTML 源码顺序决定，但复杂场景（如模态框、动态内容）需手动管理。

2. 焦点指示器与默认行为
   浏览器会为当前获得焦点的元素（如链接、按钮、输入框）添加视觉指示（如轮廓线）。通过 CSS 的 :focus 伪类可自定义样式，但需保证可见性。默认焦点顺序遵循 DOM 流，但可通过 tabindex 属性调整：

   • tabindex="0"：元素按自然顺序加入焦点流。
   • tabindex="-1"：元素可通过 JavaScript 获得焦点，但不参与自然 Tab 顺序。

3. 焦点操作的 JavaScript 方法
   使用 element.focus() 可将焦点移至特定元素，结合 element.blur() 移除焦点。例如，打开模态框时自动聚焦到关闭按钮：

   document.getElementById("close-button").focus();
   

4. 焦点陷阱与模态框
   模态框需将焦点限制在其内部，避免用户意外操作背景内容。实现方式：

   • 打开模态框时，保存当前焦点。
   • 监听 Tab 键，在模态框最后一个元素后循环回第一个元素。
   • 关闭模态框时，恢复原焦点。

5. 动态内容的焦点管理
   当页面动态更新（如 AJAX 加载新内容）时，应自动将焦点移至新区域，并通过 aria-live 区域通知屏幕阅读器。例如：

   <div aria-live="polite" id="live-region"></div>
   <script>
     document.getElementById("live-region").innerHTML = "新内容已加载";
   </script>
   

6. 可访问性树与焦点导航
   焦点管理需与可访问性树（Accessibility Tree）同步，确保辅助技术能正确识别焦点位置。通过 ARIA 属性（如 aria-hidden、aria-modal）隐藏非活动内容，引导焦点至有效区域。

7. 实际应用与标准
   遵循 WCAG 2.1 指南（如“2.4.3 焦点顺序”和“1.3.2 有意义序列”），结合测试工具（如 axe、Lighthouse）验证焦点逻辑。常见案例：

   • 单页面应用（SPA）路由切换时重置焦点到页面顶部。
   • 表单验证错误后聚焦到第一个错误字段。

8. 进阶场景与工具
   复杂组件（如标签页、手风琴菜单）需用 roving tabindex 模式，通过方向键控制焦点。库如 React A11y、Vue FocusTrap 可简化实现，但需确保底层语义符合 ARIA 设计模式。