Web 可访问性焦点遍历（Accessibility Focus Traversal）

1. 基础概念：焦点遍历的定义与重要性

   • 焦点遍历指用户通过键盘（通常是 Tab 键）在网页元素间顺序移动焦点的行为。焦点指示器（如高亮边框）会标识当前被选中的交互元素（如链接、按钮、输入框）。
   • 其核心价值在于：
     • 为无法使用鼠标的残障用户（如运动障碍或视力障碍）提供导航能力
     • 符合 WCAG 2.1 的“键盘可访问性”标准（成功准则 2.1.1、2.4.3）
     • 提升所有用户在表单填写等场景的操作效率

2. 焦点遍历的默认逻辑

   • 浏览器默认按 DOM 顺序遍历，遵循以下规则：
     • 仅遍历可聚焦元素（如 <a>、<button>、<input>、<select>）
     • 元素是否参与遍历由 tabindex 属性控制：
       • tabindex="0"：按 DOM 顺序加入遍历流
       • tabindex="-1"：可通过 JavaScript 聚焦，但不参与键盘遍历
       • tabindex≥1：违反可访问性规范，会导致遍历顺序混乱（应避免使用）
     • 隐藏元素（display: none 或 visibility: hidden）自动被排除

3. 焦点顺序的显式控制方法

   • 通过 tabindex 与 DOM 结构调整顺序：

     <!-- 默认顺序：按钮A → 按钮C -->
     <button>按钮A</button>
     <button tabindex="3">按钮C</button>
     <button tabindex="2">按钮B</button>
     

     • 此例中遍历顺序变为：按钮A → 按钮B → 按钮C（因 tabindex≥1 会优先遍历）
   • 最佳实践：仅使用 tabindex="0" 或 -1，通过调整 DOM 顺序实现逻辑流

4. 复杂场景的焦点管理

   • 模态对话框：
     • 打开时需用 element.focus() 将焦点移至对话框
     • 用 tabindex="-1" 和 JavaScript 限制焦点在对话框内循环（“焦点陷阱”）
     • 关闭时焦点应返回触发元素
   • 单页面应用（SPA）：
     • 路由切换后需手动将焦点移至新内容区域
     • 使用 <div tabindex="-1" id="main"> 包裹主内容并通过 main.focus() 重置焦点

5. 视觉反馈与用户体验增强

   • 焦点指示器需满足：
     • 颜色对比度至少 3:1（WCAG 2.4.11）
     • 尺寸不小于 2px 边框厚度
   • 自定义焦点样式示例：

     button:focus {
       outline: 3px solid #005fcc;
       outline-offset: 2px;
     }
     

   • 避免使用 outline: none，除非提供等效替代样式

6. 辅助技术兼容性注意事项

   • 屏幕阅读器会朗读获得焦点的元素名称、角色、状态
   • 动态内容更新时，应通过 aria-live 区域声明或程序化焦点移动通知用户
   • 避免焦点频繁自动跳转（超过每秒一次），可能干扰屏幕阅读器操作

7. 测试与验证工具

   • 键盘测试：仅用 Tab、Shift+Tab、Enter、Space 遍历所有功能
   • 自动化工具：axe-core、Lighthouse 可检测焦点顺序问题
   • 浏览器开发者工具：
     • 元素检查器查看 tabindex 值
     • 无障碍面板模拟屏幕阅读器焦点导航