tabindex="0"是让非原生元素按dom顺序自然进入tab流的唯一合理方式，需同步添加role属性、监听keydown事件并提供:focus-visible样式；tabindex="-1"仅支持编程聚焦，正整数tabindex必须禁用。
tabindex="0" 是什么，什么时候必须加
它让 div、span 这类默认不可聚焦的元素按 DOM 顺序自然进入 Tab 键流。不是“让它能聚焦”，而是“声明：我愿意遵守页面原本的焦点顺序”。
常见错误现象：div 上写了 onclick 却没加 tabindex="0"，键盘用户 Tab 到那里就直接跳过，完全无法触发；或者加了但没配 role="button"，屏幕阅读器读作“普通文本”，用户不知道这是可操作项。
- 原生可聚焦元素（
button、a[href]、input）**不要加**tabindex="0"——冗余，还可能干扰某些旧浏览器行为 - 自定义按钮/开关/菜单根容器（如
<div role="button">）**必须加** <code>tabindex="0"，否则键盘根本到不了 - 加完之后不会自动响应空格或回车——得手动监听
keydown，判断event.key === 'Enter'或event.key === ' '（注意是空格字符） - CSS 如果清除了
outline，必须补上:focus-visible样式，否则焦点位置不可见 - 模态框首次打开时，应立刻对第一个可操作项（如确认按钮）调用
.focus()，前提是它有tabindex="-1" -
button或a元素**不要加**tabindex="-1"——它们本就在 Tab 流里，加了等于主动踢出 - 元素若被
display: none或visibility: hidden隐藏，.focus()会静默失败，哪怕有tabindex="-1" - Safari 不支持
focus({preventScroll: true})，传对象参数会失效；生产环境建议先检测：if ('preventScroll' in FocusOptions.prototype) - 永远不要用
tabindex="1"或更高正数——WCAG 明确不推荐，实测中 90% 的键盘用户会因此迷失 - 所谓“自定义顺序”在真实交互中并不存在：Tab 键永远按 DOM 顺序走，正数 tabindex 只会让部分元素插队，破坏线性逻辑
- 如果真想控制初始焦点位置（比如表单加载后聚焦用户名），用
autofocus属性，比写正数 tabindex 更可靠、更语义化 - 动态插入的元素（如弹出菜单项）若依赖正数 tabindex 排序，一旦 DOM 重排或组件复用，焦点顺序立刻崩坏
- 非激活面板必须同时满足：
hidden属性（或aria-hidden="true"）+ 移除所有tabindex（不能留tabindex="-1"，否则仍可被.focus()激活） - 激活面板需确保至少一个子元素可聚焦，且首次进入时调用
.focus()到首个交互控件（如输入框、主按钮） -
aria-hidden="true"的父容器内，所有子元素无需再单独加aria-hidden，但必须确保没有残留tabindex - 用
display: none替代hidden是危险的——它不阻止.focus()调用，也不影响tabindex解析，纯视觉隐藏而已
tabindex="-1" 不是隐藏开关，是编程聚焦入口
它让元素**无法被 Tab 键到达**，但可以通过 JS 调用 .focus() 主动把焦点给它。这不是“禁用”，而是“仅限程序控制”。
常见错误现象：模态框打开后调用 modal.querySelector('button').focus() 失败，控制台无报错，但焦点没动——大概率是那个按钮是 div，没设 tabindex="-1"，导致 .focus() 无效。
为什么正整数 tabindex（如 1、2、5）必须避免
它不是“提前排队”，而是强行打断 DOM 自然顺序，导致键盘用户和屏幕阅读器预期全乱。尤其在动态渲染内容（如 React/Vue 组件重挂载）后，正数 tabindex 极易失效或错位。
常见错误现象：页面上有两个 tabindex="1"，结果只聚焦第一个；或者某区域用 tabindex="99" 强行抢焦点，结果用户从顶部 Tab 到一半突然跳到底部，导航路径断裂。
aria-hidden + hidden + tabindex 组合怎么配才不出错
三者混用时最容易漏掉一个环节，造成“键盘能进去但出不来”或“焦点卡死”的键盘陷阱。
常见错误现象：选项卡切换后，非激活面板仍保留 tabindex="0"，键盘用户一按 Tab 就跳进不可见内容里；或者用了 aria-hidden="true" 却忘了移除 tabindex="0"，导致焦点停靠点仍在但内容不可见。
真正难的不是记住规则，而是每次加 tabindex 前，都得问一句：这个元素是否必须被键盘用户抵达？抵达之后，是否有明确的操作方式和视觉反馈？这两个问题漏答任何一个，tabindex 就从无障碍工具变成键盘陷阱开关。
