HTML中键盘导航焦点顺序tabindex的设置规则与注意事项-html教程-PHP中文网

tabindex="0"使非原生可聚焦元素（如div、span）按HTML源码顺序自然加入Tab流，需配合role属性、键盘事件监听及:focus-visible样式；tabindex="-1"仅支持JavaScript编程聚焦，不可通过Tab键到达。

html中键盘导航焦点顺序tabindex的设置规则与注意事项

tabindex 不是用来“排号”的，设成 1、2 或 99 都是错的；真正该用的只有 0 和 -1，其余数值会破坏焦点流、误导屏幕阅读器、且在动态内容中极易失效。

tabindex="0" 是什么，什么时候必须加

它让一个默认不可聚焦的元素（比如 div、span）按 HTML 源码顺序自然加入 Tab 流。不是“开启聚焦”，而是“声明：我愿意遵守 DOM 顺序”。

原生可聚焦元素（button、a[href]、input）**不需要**加 tabindex="0"——它们默认就在流里，加了反而冗余
自定义控件（如 ）**必须加** tabindex="0"，否则键盘用户根本 Tab 不到
加了之后不会自动响应 Enter/Space，得手动监听 keydown 并判断 event.key === 'Enter' 或 event.key === ' '（注意空格是字符串空格）


必须同步加 role 属性（如 role="button"），否则屏幕阅读器读不出语义
CSS 中若重置了 outline，要补上 :focus-visible 或 :focus 样式，否则焦点不可见
tabindex="-1" 不是隐藏开关，是编程聚焦入口
它让元素**无法被 Tab 键到达**，但可以通过 JS 调用 .focus() 主动把焦点给它。这不是“禁用”，而是“仅限程序控制”。

模态框打开后，立即对第一个可操作项（如“确认”按钮）调用 element.focus()，前提是它有 tabindex="-1"（否则非原生元素无法被 .focus() 成功聚焦）
Accordion 展开后，把焦点移到新暴露的首项，而不是留在触发按钮上
别给 button 或 a 加 tabindex="-1"——它们本就在 Tab 流里，加了等于主动踢出，除非你明确想临时屏蔽其键盘访问

focus({preventScroll: true}) 在 Safari 中不支持，传对象参数会静默失败；真实项目建议先检测：if ('preventScroll' in FocusOptions.prototype)

元素若被 display: none 或 visibility: hidden 隐藏，.focus() 会失败，哪怕有 tabindex="-1"


为什么正整数 tabindex（如 1、2、5）必须避免
浏览器确实会按正整数升序排列这些元素，但结果不可靠、不可维护、也不可访问。

											
												
												
													HTML Text Extract
													从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。
												
												下载
												
											
										

多个 tabindex="1" 元素中，只有第一个会被当作“最小正整数”，其余被忽略——不是并列第一，而是“只有一个第一”
DOM 结构变化（比如新增一个 tabindex="3" 的元素）会打乱原有顺序，且无法预测影响范围
屏幕阅读器可能跳过中间缺失的数值（比如只有 tabindex="1" 和 tabindex="5"），造成导航断层
Flex/Grid 布局下视觉顺序和 DOM 顺序不一致时，正整数 tabindex 会让焦点流和用户预期彻底脱节
原生表单控件（如 input）默认是 tabindex=0，一旦混用正整数，它们会被挤到最后——用户 Tab 到一半突然跳到页脚输入框，体验崩坏

调试时焦点“消失”或“跳不过”，先查这几点
90% 的问题不是 tabindex 写错了，而是元素根本没进入可聚焦状态，或者焦点被中途拦截。

用开发者工具选中元素，在 Accessibility 面板看 “Focusable: true” 是否显示——如果不是，tabindex 再对也白搭
父级是否有 inert、aria-hidden="true"、pointer-events: none 或 overflow: hidden？这些都会阻断焦点传递
是否用了 opacity: 0 或 position: absolute; left: -9999px 隐藏？这些不影响可聚焦性，得配 tabindex="-1" 或 inert 才真正排除
移动端 Safari 在用户首次触屏前，会忽略非原生元素的 .focus() 调用——这不是 bug，是策略限制
React/Vue 中条件渲染导致元素卸载重挂载，焦点状态无法保留；应优先用 hidden 属性或 CSS 控制显隐，保持 DOM 存在

最复杂的点不在怎么写 tabindex，而在理解：焦点流是一条线性路径，不能跳跃、不能分叉、也不能靠“编号”强行插队；真正需要干预的，永远是状态变化时的 .focus() 调用时机和目标选择，而不是属性值本身。