别让键盘用户“撞墙”：深入理解 HTML tabindex 与无障碍导航

想象一下这个场景：你正在赶项目上线，为了追求视觉效果，把原生按钮全改成了样式精美的 div。测试时你用鼠标点得很顺，直到某天产品经理习惯性地用键盘操作表单，按了几下 Tab 键，发现焦点直接跳过了几个关键输入框，或者根本停不下来。这种体验不仅令人抓狂，在某种程度上甚至是将部分用户拒之门外。

这就是 tabindex 属性缺席或滥用带来的后果。很多开发者视它为鸡肋，认为只有做复杂交互时才需要，实则它关乎网页的“流动秩序”。浏览器默认的 Tab 顺序基于 DOM 结构和元素语义（如 <input>, <a>），一旦结构被打乱或缺乏语义，自然导航就会失效。

要驾驭好键盘导航，核心在于理解三个数值背后的逻辑。

最推荐的是 tabindex="0"。这通常用于让非原生可聚焦元素（比如自定义的 <div> 按钮）进入自然的 Tab 序列中。关键在于，它能保证元素按照文档流顺序被访问，不会打乱浏览器的默认预测。但切记，如果原本的 <button> 或 <input> 已经能获取焦点，绝对不要画蛇添足加上 0，那反而会造成重复聚焦的 Bug。

另一个常用值是 tabindex="-1"。它的特性很微妙：元素本身不会被 Tab 键直接选中，但可以通过 JavaScript 调用 .focus() 方法强制聚焦。这在弹窗组件里是救星。当模态框打开时，你需要把焦点锁定在弹窗内，防止用户 Tab 出去跑到后台页面；关闭弹窗后，再把焦点还给触发按钮。使用负值既能管理焦点循环，又不会污染页面的基础导航路径。

至于正整数（如 tabindex="1"、2），请务必远离。这是新手最容易踩的深坑。虽然理论上可以强行指定顺序，但不同浏览器对正数索引的处理差异巨大，极易导致跨平台兼容性灾难。一旦你的数字填错，整个页面的导航链条都会断裂。真正想调整顺序，请通过调整 DOM 结构或结合 CSS 布局来解决，而不是靠数字排序。

除了数值本身，视觉反馈同样重要。很多时候 tabindex 生效了，但用户不知道焦点在哪。因为有些重置样式会移除默认的 outline。如果你手动设置了 tabindex，务必确保配合 :focus-visible 伪类，给用户保留清晰的聚焦边框。看不见光标的路径，比没有路径更糟糕。

在这个追求鼠标悬停特效和触控滑动的时代，容易被遗忘的键盘党恰恰是最严谨的使用者。良好的 tabindex 设置，不仅是满足无障碍标准（WCAG）的合规要求，更是体现工程质量的细节。一个不需要依赖鼠标的网站，往往意味着其代码结构清晰、交互逻辑健壮。

下次重构组件库或设计复杂表单时，不妨顺手检查一下 Tab 键的流向。几行代码的修正，可能就能让某个残障用户或双手不便的操作者顺利完成一次任务。技术的人文价值，往往就藏在这些看似不起眼的细节里。