键盘用户高效tab导航的关键是确保tab顺序符合视觉流并跳过隐藏或无关内容；默认跳过display:none、visibility:hidden、aria-hidden="true"等元素；慎用tabindex，优先保持dom顺序与视觉逻辑一致，并动态管理模态框等焦点。
要让键盘用户能自然、高效地通过 Tab 键遍历页面，关键在于确保 tab 顺序符合视觉流，同时 跳过不可见或不相关的内容（如 display: none、visibility: hidden、aria-hidden="true" 的元素）。浏览器默认会跳过大多数隐藏内容，但需主动控制以避免意外焦点捕获。
理解哪些内容天然被跳过
浏览器原生忽略以下状态的元素，它们不会出现在 Tab 顺序中：
- display: none 或 visibility: hidden 的元素
- 没有 tabindex 且不可聚焦的静态元素（如 div、span）
- 设置了 aria-hidden="true" 且未显式设 tabindex="0" 的元素
- 禁用状态的表单控件（disabled 属性生效时）
主动控制可聚焦性：慎用 tabindex
默认可聚焦元素（a、button、input、select、textarea、iframe 等）无需额外设置。若需让非交互元素获得焦点（如自定义按钮），应使用 tabindex="0"；若需临时移出 Tab 流，用 tabindex="-1"（仅支持脚本聚焦，不参与 Tab 导航）。
避免使用 tabindex="1" 或更高值——它会打乱文档顺序，导致不可预测的焦点路径。
确保 DOM 顺序匹配视觉与逻辑顺序
Tab 顺序默认按 HTML 源码顺序进行。如果视觉布局靠 CSS（如 Flexbox 或 Grid）大幅重排，但 DOM 顺序混乱（例如把“跳转到主内容”链接放在页脚后），键盘用户会先遍历页脚再回到顶部，体验断裂。
解决方法：
- 保持语义化 HTML 结构，让主要内容区域在 DOM 中靠前
- 用 跳至主内容 +
ain id="main"> 实现快捷跳转 - 避免用 order 属性或 float 颠倒逻辑阅读流
动态内容出现时更新焦点管理
模态框、下拉菜单、通知弹窗等显示时，必须：
- 将焦点限制在该容器内（焦点陷进，focus trap）
- 首次打开时立即将焦点移到第一个可聚焦子元素（如标题或首输入框）
- 关闭时将焦点还原到触发它的元素
- 隐藏时确保其所有子元素不再可聚焦（推荐用 display: none 而非仅 visibility 或 opacity）
