Web 可访问性焦点顺序（Accessibility Focus Order） 焦点顺序的基本概念 Web 可访问性焦点顺序指用户通过键盘（如 Tab 键）在网页元素间导航时，焦点移动的逻辑顺序。它通常遵循视觉布局的流向（如从左到右、从上到下），确保交互式元素（链接、按钮、表单字段）的访问顺序与页面内容结构一致。对于依赖键盘操作的用户（如行动障碍者或屏幕阅读器用户），焦点顺序的合理性直接影响使用效率。 焦点顺序的实现原理 DOM 顺序决定默认焦点顺序 ：浏览器默认按元素在 HTML 文档中的出现顺序（DOM 顺序）分配焦点。若视觉布局通过 CSS（如 float 、 position ）调整，可能导致焦点顺序与视觉顺序脱节。 显式控制方法 ： tabindex 属性： tabindex="0" 使元素加入自然焦点顺序（如 <div> 变为可聚焦）。 tabindex="-1" 使元素可通过脚本聚焦，但脱离自然顺序。 正值（如 tabindex="1" ）会强制优先级，但可能破坏可访问性，应避免使用。 编程式焦点管理：通过 JavaScript 的 element.focus() 动态调整焦点，常见于模态对话框打开时强制焦点移至其内部。 焦点顺序的设计规范 WCAG 2.1 指南 ： 成功标准 2.4.3（焦点顺序）：要求焦点顺序保留含义与可操作性。 异常情况：若页面存在多栏布局或动态内容，需通过 ARIA 属性（如 aria-flowto ）或脚本修正顺序，但需谨慎使用以避免兼容性问题。 视觉与逻辑统一 ：例如，表单的焦点应按标签顺序移动，错误提示应在触发字段后立即被聚焦。 常见问题与解决方案 CSS 布局导致的顺序错乱 ：如使用 flex-order 或 grid-area 重排元素时，需通过 DOM 结构调整或 tabindex 修正。 动态内容插入 ：通过 aria-live 区域声明动态变化，或使用 focus-management 库（如 Vue 的 vue-focus ）确保新元素获焦。 跳过冗余内容 ：为重复导航栏添加“跳过链接”（ <a href="#main" skip-link> ），帮助用户直接进入主内容区。 测试与验证工具 键盘测试：手动按 Tab 键遍历页面，检查焦点指示器（如高亮边框）是否清晰且顺序合理。 自动化工具：Axe、WAVE 可检测 tabindex 误用；Lighthouse 审计焦点顺序逻辑。 屏幕阅读器配合：使用 NVDA 或 VoiceOver 验证焦点与朗读顺序的一致性。