Web 可访问性焦点顺序（Accessibility Focus Order） 焦点顺序的基本概念 焦点顺序指用户使用键盘（如 Tab 键）浏览网页时，焦点（当前交互元素的突出显示状态）在页面元素间移动的路径顺序。它由 HTML 元素的代码顺序或显式定义的 tabindex 属性控制。默认顺序遵循元素在 DOM 中的出现顺序。 DOM 顺序与视觉布局的关系 DOM 顺序是浏览器渲染内容的基础，但 CSS（如 float 、 flexbox 、 grid ）可能改变视觉布局，导致 DOM 顺序与视觉顺序不一致。若焦点顺序与视觉逻辑不匹配，键盘用户会迷失方向。例如，一个侧边栏在视觉上位于左侧，但 DOM 中却出现在主内容之后，焦点可能错误地先跳转到主内容。 tabindex 属性的作用与风险 tabindex=0 ：将元素加入自然焦点顺序，使其可被键盘聚焦（如 <div> 默认不可聚焦，添加后变为可聚焦）。 tabindex≥1 ：强制元素在自然顺序中提前，但会破坏逻辑流，应避免使用。 tabindex=-1 ：移除自然顺序，仅允许通过 JavaScript 编程聚焦（如弹出式对话框的初始焦点）。错误使用正值的 tabindex 会导致焦点跳跃混乱。 动态内容的焦点管理 当页面内容动态更新（如 AJAX 加载、表单验证错误），需通过 JavaScript 调整焦点： 新内容应插入 DOM 的合理位置，以保持自然焦点顺序。 关键变化（如错误提示）应使用 aria-live 区域声明，或通过 element.focus() 将焦点移至新内容（例如提交表单后聚焦到错误摘要）。 复杂组件的焦点顺序策略 对于自定义组件（如菜单、模态框），需遵循 WAI-ARIA 实践： 模态对话框 ：打开时焦点移至对话框内，关闭后返回触发元素。 下拉菜单 ：用方向键在菜单项间循环焦点，而非 Tab 键。 键盘陷阱 ：在特定组件内限制焦点循环（如日期选择器），按 Esc 键释放焦点。 测试与验证工具 手动测试：仅用 Tab 键遍历页面，验证焦点是否按视觉逻辑移动。 自动化工具：axe-core、Lighthouse 可检测 tabindex 误用，但无法完全替代人工测试。 屏幕阅读器配合：使用 NVDA/JAWS 观察焦点与朗读顺序的一致性。 无障碍标准的要求 WCAG 2.1 成功标准 2.4.3（焦点顺序）要求焦点顺序保留含义与可操作性。若自定义顺序必要，需通过设计确保用户不会迷失上下文（如标签页组中使用箭头键而非 Tab 切换）。