tabindex="0"是让非原生可聚焦元素（如div、span）按dom顺序自然进入tab流的必要声明，必须加在自定义交互容器（如）上，而非原生表单元素；加后需同步配role、监听keydown并提供:focus-visible样式。
tabindex="0" 是什么，什么时候必须加
它让 <div>、<code><span></span> 这类默认不可聚焦的元素，按 HTML 源码顺序自然进入 Tab 键流。不是“让它能聚焦”，而是“声明：我愿意遵守页面原本的焦点顺序”。
常见错误现象：<div onclick="doSomething()">点我</div> 没加 tabindex="0"，键盘用户 Tab 到那里直接跳过；加了但没配 role="button"，屏幕阅读器读作“普通容器”，用户不知道这是可操作项。
- 原生可聚焦元素（
<button></button>、<a href></a>、<input>）**不要加**tabindex="0"——冗余，还可能干扰 React hydration 或旧浏览器行为 - 自定义按钮/开关/菜单根容器（如
<div role="button">）**必须加** <code>tabindex="0"，否则键盘根本到不了 - 加完之后不会自动响应空格或回车——得手动监听
keydown，判断event.key === 'Enter'或event.key === ' '（注意是空格字符） - CSS 如果清除了
outline，必须补上:focus-visible { outline: 2px solid #007bff; }，否则焦点位置不可见 - 模态框首次打开时，应立刻对第一个可操作项（如确认按钮）调用
.focus()，前提是它有tabindex="-1" -
<button></button>或<a></a>元素**不要加**tabindex="-1"——它们本就在 Tab 流里，加了等于主动踢出 - 元素若被
display: none或visibility: hidden隐藏，.focus()会静默失败，哪怕有tabindex="-1" -
Safari不支持focus({preventScroll: true})，传对象参数会失效；生产环境建议先检测：if ('preventScroll' in FocusOptions.prototype) - 正整数 tabindex 在动态渲染内容（如 React/Vue 组件重挂载）后极易失效或错位
- 多个相同正数（如都设
tabindex="3"）时，浏览器仍按 DOM 顺序聚焦，不是随机也不是按插入顺序 - WCAG 明确不推荐，实测中 90% 的键盘用户会因此迷失
- SSR 渲染时客户端与服务端
tabindex值不一致，还会触发 hydration 警告 - 只对有交互意图的网格项加
tabindex="0"，比如可点击的卡片、可展开的面板标题 - 必须同步加
role，如role="button"或role="region"，否则屏幕阅读器无法识别语义 - 避免给纯展示型网格项（如头像容器、图标
<span></span>）加tabindex="0"，这会增加无意义的焦点停顿 - 编辑器中几乎所有“临时聚焦”场景（如模态对话框、属性面板展开）都依赖
tabindex="-1"，而不是tabindex="0"
tabindex="-1" 不是隐藏开关，是编程聚焦入口
它让元素**无法被 Tab 键到达**，但可以通过 JS 调用 .focus() 主动把焦点给它。这不是“禁用”，而是“仅限程序控制”。
常见错误现象：模态框打开后调用 modal.querySelector('button').focus() 失败，控制台无报错，但焦点没动——大概率是那个按钮是 <div>，没设 <code>tabindex="-1"，导致 .focus() 无效。
为什么永远不要用 tabindex="1"
写 tabindex="1" 不会让它变成“第一个被 Tab 到的元素”，只会把它塞进所有正数里排最小——但多个 tabindex="1" 仍按 DOM 顺序走，和没设一样。更糟的是，一旦混入 tabindex="0" 的链接或按钮，Tab 流变成“正数 → 0 值 → 其他”，完全失控。
常见错误现象：页面上有两个 tabindex="1"，结果只聚焦第一个；或者某区域用 tabindex="99" 强行抢焦点，结果用户从顶部 Tab 到一半突然跳到底部，导航路径断裂。
网格布局和编辑器里怎么用 tabindex 才不翻车
在 CSS Grid 或编辑器这类复杂 UI 中，tabindex="0" 不会改变视觉位置，只表示“这个原本不可聚焦的元素可以被 Tab 键选中，并按 HTML 源码顺序进入焦点流”——哪怕它在视觉上被 grid-template-areas 或 order 移到了右下角。
常见错误是给所有网格项统一加 tabindex="0" 后发现焦点顺序和视觉布局不一致。这是因为浏览器只认 DOM 顺序，不认 CSS 重排。如果你的网格项是动态插入（比如 React 中 map 渲染），DOM 顺序可能和预期不同，此时必须检查实际生成的 HTML 结构。
真实项目中最容易被忽略的，是加了 tabindex="0" 却没同步处理 keydown 和 role，或者以为 tabindex="-1" 就是“隐藏”，结果焦点被卡在看不见的地方。这些不是边缘 case，而是键盘用户每天都会撞上的断点。
