在前端开发的可访问性优化场景中，经常会遇到需要隐藏元素但又要保留其焦点可达性的需求，tabindex="-1" 属性就是解决这类问题的核心方案。它不会让元素出现在默认的键盘 tab 切换顺序中，却允许通过 JavaScript 等方式主动将焦点设置到该元素上，兼顾了视觉隐藏和交互可达的双重要求。
tabindex 属性的基本规则
tabindex 是用来控制元素在键盘 tab 导航中顺序的属性，不同取值对应不同的行为：
- tabindex="0"：元素会按照文档流的顺序加入 tab 导航序列，用户按 tab 键时可以聚焦到该元素。
- tabindex 大于 0：元素会按照 tabindex 数值从小到大的顺序优先加入 tab 导航序列，数值相同的则按文档流顺序排列。
- tabindex="-1"：元素会被排除在默认的 tab 导航序列之外，无法通过按 tab 键聚焦，但可以通过 JavaScript 的 focus() 方法主动聚焦。
为什么需要隐藏元素但保持焦点可达
常见的元素隐藏方式比如设置 display:none 或者 visibility:hidden，都会让元素完全无法被聚焦，即使调用 focus() 方法也不会生效。而有些场景下我们需要隐藏元素但保留聚焦能力：
- 实现无障碍阅读，比如隐藏的提示信息需要在特定操作后聚焦给屏幕阅读器播报。
- 自定义弹窗打开时，需要将焦点移动到弹窗内部，同时避免弹窗外的元素被 tab 导航到。
- 表单校验失败时，将焦点移动到隐藏的错误提示容器，让辅助工具感知到错误内容。
tabindex="-1" 的使用示例
基础用法示例
下面的代码展示了一个隐藏的提示元素，通过 tabindex="-1" 保持焦点可达：
<!-- 隐藏的提示元素，设置 tabindex="-1" -->
<div id="hiddenTip" tabindex="-1" style="position: absolute; left: -9999px; top: -9999px;">
这是一段隐藏的提示内容，需要时可以聚焦
</div>
<button id="showTipBtn">触发提示</button>
<script>
// 点击按钮时将焦点移动到隐藏的提示元素
document.getElementById("showTipBtn").addEventListener("click", function() {
const tipElement = document.getElementById("hiddenTip");
tipElement.focus();
// 可以同时让屏幕阅读器播报内容
tipElement.setAttribute("aria-live", "assertive");
});
</script>
自定义弹窗场景示例
自定义弹窗打开时，通常需要将焦点限制在弹窗内部，避免焦点跑到弹窗外的元素上，这时候可以用 tabindex="-1" 处理弹窗容器：
<!-- 自定义弹窗 -->
<div id="customModal" tabindex="-1" style="display: none; width: 300px; height: 200px; border: 1px solid #ccc; padding: 20px;">
<h3>弹窗标题</h3>
<p>弹窗内容区域</p>
<button id="closeModalBtn">关闭弹窗</button>
</div>
<button id="openModalBtn">打开弹窗</button>
<script>
const modal = document.getElementById("customModal");
const openBtn = document.getElementById("openModalBtn");
const closeBtn = document.getElementById("closeModalBtn");
// 打开弹窗时聚焦到弹窗容器
openBtn.addEventListener("click", function() {
modal.style.display = "block";
modal.focus();
});
// 关闭弹窗时焦点回到打开按钮
closeBtn.addEventListener("click", function() {
modal.style.display = "none";
openBtn.focus();
});
</script>
注意事项
- 设置 tabindex="-1" 的元素本身不会获得默认的聚焦样式，如果需要视觉反馈，可以手动添加 :focus 伪类样式。
- 不要给大量非交互元素设置 tabindex="-1"，避免影响页面的可访问性逻辑。
- 如果元素本身是不可聚焦的元素（比如 div、span），设置 tabindex="-1" 后才可以被 focus() 方法聚焦，原生可聚焦元素（比如 input、button）即使不设置 tabindex 也可以被聚焦。
可访问性优化是前端开发的重要环节，合理使用 tabindex="-1" 可以在隐藏元素的同时保留必要的交互能力，让更多用户能够顺畅使用页面功能。