tabindex="0"仅用于默认不可聚焦但需键盘访问的容器（如<div role="button">），须配role属性并监听Enter/空格键；tabindex="-1"仅作编程聚焦入口；禁用tabindex="1"及正数，避免导航断裂。
tabindex="0"该加在哪些元素上才真正有用
只加在默认不可聚焦、但业务上必须支持键盘访问的容器上，比如 <div role="button">、<h3 role="tab">、自定义折叠面板标题栏。原生 <button>、<a href>、<input> 本来就进 Tab 流，加了 tabindex="0" 反而冗余，还可能干扰 React/Vue 的 hydration 或旧浏览器行为。
常见错误是给纯展示文本或图标容器（如 <span class="icon">）加 tabindex="0"，结果键盘用户多停一次却无事可做，屏幕阅读器还多读一遍“无意义 div”。
- 必须同步设
role属性，例如role="button"，否则辅助技术读作“普通容器”，用户无法理解用途 - 加完后不会自动响应 Enter 或空格 —— 必须监听
keydown，且只对event.key === 'Enter'或event.key === ' '（注意是空格字符）做处理 - 空格触发时要调
e.preventDefault()，否则页面会意外滚动 - CSS 中若移除了
outline，必须补:focus-visible { outline: 2px solid #007bff; }，否则焦点位置不可见
tabindex="-1"不是隐藏开关，是编程聚焦入口
tabindex="-1" 的唯一合法用途：让元素不能被 Tab 键碰到，但能被 JavaScript 调用 .focus() 主动聚焦。这不是“禁用”，而是“仅限程序控制”。模态框打开后聚焦首个按钮、选项卡切换后聚焦内容区首项、代码编辑器激活时聚焦 <textarea>——全靠它。
常见错误包括：
立即学习“前端免费学习笔记（深入）”；
- 给整个
tabpanel容器设tabindex="-1"，结果.focus()落在空容器上，用户按 Tab 还是跳到页面其他地方 - 目标元素还没渲染完成（比如异步加载的表单字段）就调
.focus()，DOM 找不到，静默失败 - 聚焦后元素被
overflow: hidden或position: absolute遮挡，没配element.scrollIntoView({ block: 'nearest' })，用户看不见焦点在哪 - 给
<button>或<a>加tabindex="-1"—— 它们本就在 Tab 流里，加了等于主动踢出
元素若被 display: none 或 visibility: hidden 隐藏，.focus() 会静默失败，哪怕有 tabindex="-1"。
为什么永远不要用 tabindex="1"
写 tabindex="1" 不会让元素变成“第一个被 Tab 到的”，只会把它塞进所有正数里按升序排，且所有正数元素都会排在原生可聚焦元素之后 —— 导致导航路径断裂。更糟的是，在 React/Vue 动态渲染或 SSR hydration 场景下，这个值根本不可维护。
多个 tabindex="1" 元素中，浏览器只认 DOM 中第一个，其余被忽略；混用 tabindex="1" 和 tabindex="2" 后，焦点顺序变成“正数升序 → DOM 顺序 → tabindex="0" 元素”，完全脱离用户预期。
- 移动端 Safari 直接无视大部分
tabindex="0"，tabindex="1"更无效，还可能触发警告 - 屏幕阅读器把第一个
tabindex="1"当作逻辑起点，如果它是页脚的“导出按钮”，用户一进页面就听到“导出”，主编辑区上下文全丢 - Flex/Grid 布局中视觉顺序与 DOM 顺序不一致时，正数
tabindex会让键盘导航路径和视觉流彻底割裂
复杂网格布局中 tabindex 的典型误用
单纯靠 tabindex 控制网格内 Tab 导航路径注定失败 —— 它只决定“能不能被 Tab 键碰到”，不负责“怎么跳”“跳到哪”，更不管方向键或语义。给 display: grid 父容器加 tabindex="0"，实际效果往往是焦点只停在容器上，内部子项全被跳过；或者焦点直接穿透进第一个可聚焦子项，后续 Tab 就乱序。
正确做法是：
- 容器设
role="grid" tabindex="-1"，表示“我是个语义网格，但别让我自己收焦点” - 每行用
role="row"，每单元格用role="gridcell"，不能混用<div>或<article> - 单元格内的可交互元素（如
<input type="radio">）必须保留原生聚焦能力，不要包裹在tabindex="-1"的<div>里 - 用
aria-labelledby双向关联行列标题，例如aria-labelledby="q3 col-plus2"，其中q3是行头 ID，col-plus2是列头 ID，缺一不可
真正容易被忽略的点在于：网格的语义必须由 role 和 aria 构建，tabindex 只是配合角色起效的辅助信号，不是导航路径的调度器。
