tabindex="-1" 仅使元素不可通过Tab键聚焦，但仍可被JavaScript聚焦、保持可见且屏幕阅读器可读；它不隐藏元素，也不等同于aria-hidden或display:none。
tabindex="-1" 不是用来“隐藏元素”的，而是让元素**不可通过 Tab 键顺序到达**，但**仍可通过 JavaScript 主动聚焦（focus()）访问**。它不会影响视觉显示，也不会改变元素是否可被屏幕阅读器读取——这点常被误解。
理解 tabindex="-1" 的真实作用
元素默认的 tabindex 值为未定义（等价于 0），表示：
- 若是可聚焦元素（如 button、a[href]），自然在 Tab 流中；
- 若是非标准可聚焦元素（如 div），则不在 Tab 流中。
设置 tabindex="-1" 后：
- 元素从自然 Tab 流中移除（按 Tab 键跳过它）；
- 仍能用 element.focus() 被程序聚焦；
- 仍可响应 blur、focus 事件；
- 视觉上完全不变，也**不触发 aria-hidden 或 display:none 等隐藏行为**。
常见适用场景
适合需要“临时接管焦点”或“按需激活”的交互逻辑：
-
模态框（Modal）打开时：将焦点设到模态框内首个可聚焦元素（如关闭按钮），同时确保背景内容虽可见，但 Tab 键无法进入——靠的是移除背景元素的 tabindex 或禁用其聚焦逻辑，而非给它们加
tabindex="-1"。 -
下拉菜单展开后：菜单项可设
tabindex="-1"，再用 JS 在展开时focus()到第一个选项，实现键盘导航入口可控。 -
动态加载的内容区域：例如标签页切换后，新面板中的主操作按钮设
tabindex="-1"，切换完成立即focus()，帮助键盘用户快速定位。
与真正“隐藏”的区别
别混淆以下行为：
-
display: none或visibility: hidden→ 元素不可见、不可聚焦、不参与布局、屏幕阅读器忽略； -
aria-hidden="true"→ 屏幕阅读器忽略，但元素仍可聚焦（除非同时禁用）； -
tabindex="-1"→ 仅退出 Tab 键顺序，其余一切照常（可见、可脚本聚焦、可读屏）。
若目标是“对所有人隐藏”，不能只靠 tabindex="-1"；若目标是“保持语义和可访问性，仅控制键盘流”，它正是关键工具。
使用建议
✅ 推荐做法：
- 优先用原生可聚焦元素（
button、input等），避免给div或span随意加tabindex； - 设
tabindex="-1"后，务必配套 JS 聚焦逻辑，否则该元素对键盘用户实际“不可达”； - 配合
aria-expanded、aria-controls等属性，确保屏幕阅读器理解上下文。
❌ 避免做法：
- 给大量静态容器加
tabindex="-1"试图“管理焦点”——这会污染语义，增加维护成本； - 以为加了
tabindex="-1"就等于“隐藏”或“禁用”，结果导致键盘用户迷失或读屏异常。
