焦点顺序

要求内容

键盘用户按下 Tab 键时，应依次移动到各个交互元素，且顺序应使其能够完成所有任务而不失去上下文。在英文从左到右的布局中，这几乎总意味着从上到下、从左到右。焦点顺序不必与视觉顺序完全一致，但任何偏差仍须保留意义——例如，“跳转至页脚”链接可以位于主流程之外，只要其余部分的顺序合理即可。

本成功准则所针对的失败模式包括：对话框隐藏焦点、经过拖拽重排的网格保留了陈旧的 Tab 顺序，以及 CSS 在视觉上重新排列了内容但 DOM 仍保持原始序列。

如何满足

• 按阅读顺序构建 DOM。若视觉布局有所不同，应谨慎使用 CSS Grid 或 Flexbox 的 order 属性——但 Tab 键遵循的是源码顺序。
• 模态框打开时，将焦点移入其中并在关闭前将焦点锁定在内部。关闭后，将焦点还原到触发元素。
• 绝不使用正值 tabindex（如 tabindex="3"）。它们会创建自定义顺序，与 DOM 相冲突，且页面一有变化便会失效。
• 对于可拖拽重排的列表，应更新 DOM 顺序以匹配新的视觉顺序，使 Tab 序列保持同步。
• 测试方法：从地址栏开始按 Tab 键，逐一遍历页面上所有可聚焦元素。若你感到”迷失方向”，用户也会如此。

常见失败

• 模态框打开，但焦点停留在其后的页面上。Tab 在隐藏元素中循环，而模态框就这样悬浮着，无人触碰。
• 移动端侧抽屉菜单打开，焦点仍留在页面主体。屏幕阅读器用户无法找到刚刚出现的内容。
• flex-direction: row-reverse 翻转了视觉顺序，DOM 顺序未变，导致 Tab 向右移动时阅读顺序却是从左到右。
• 表单中散布着自定义 tabindex 值，后续添加的字段继承了 tabindex="0"，落在了最末尾。
• 加载 8 秒后弹出的”订阅”弹窗自动聚焦，将焦点从正在阅读的用户手中夺走。

重要性

焦点顺序是键盘操作中阅读顺序的等价物。一旦失序，体验不仅变慢，更会变得混乱无序。完全依赖 Tab 和 Shift+Tab 进行导航的运动障碍用户，可能被引导至表单的错误区域、完全跳过必填字段，或因单个控件位置不当而在长页面中失去方位感。