本文围绕“HTML tabindex属性的作用是什么？从可访问性到键盘导航的取值含义与实战应用”展开，旨在帮助开发者理解 tabindex 的核心机制、取值含义以及在真实项目中的落地实现。
tabindex属性的作用与基础理解
tabindex的基本含义
在理解 tabindex 之前，核心作用是控制元素的聚焦行为，以及在页面上的 焦点跳转顺序。默认情况下，只有可聚焦的控件会参与 Tab 键导航，而 tabindex 提供了一种显式的聚焦控制方式，帮助你实现自定义的聚焦逻辑。
简单来说，tabindex 决定一个元素是否可聚焦，以及它在按 Tab 键时的排序权重。理解这点对于实现无障碍页面和自定义控件至关重要，尤其是在复杂布局中。
可聚焦的div
与HTML元素的关系
默认情况下，带 href 的 a 标签、按钮、输入框等本身就具备聚焦能力，无需 tabindex；但通过使用 tabindex，你可以改变它们在 tab 顺序中的位置，或使非原生聚焦元素获得聚焦能力。
对于非原生聚焦元素，例如 div 或 span，加上 tabindex 可以将它们变成可聚焦的控件，方便实现自定义组件的键盘交互。这样做时，务必确保屏幕阅读器的提示与控件的行为一致。
自定义按钮
tabindex取值含义：0、正整数、-1
tabindex=0的作用
tabindex="0" 表示该元素可聚焦，但按照文档的自然顺序参与 键盘导航的顺序，不会改变已有的聚焦权重，只是将元素纳入可聚焦序列。
使用 tabindex="0" 的典型场景是将一组自定义控件组合成一个逻辑集合，同时确保它们对键盘用户可发现和使用，提升可访问性。
tabindex的正整数取值
正整数用于显式设定更前的聚焦顺序：数值越小，优先级越高，但对页面结构的影响也随之增大。只有在必要时才使用正整数，以避免打乱自然的文档焦点顺序。
在实际开发中，建议将正整数保持在较小的范围，例如 1–3，用来实现自定义控件中的特殊导航关系，同时确保屏幕阅读器的提示与焦点路径保持一致。过大的数值会让焦点跳转变得难以预测。
tabindex="-1"的作用
tabindex="-1" 表示该元素不可通过 Tab 键逐级聚焦，但可以通过脚本显式聚焦，例如通过 element.focus()。这是实现模态对话框等场景时常用的技巧之一。
它也用于临时移除焦点元素以避免在键盘导航中干扰，同时在需要时再通过脚本将焦点恢复到特定元素上。
从可访问性角度的应用
聚焦管理与模态对话框
在模态对话框场景中，将焦点限制在对话框内是提升可访问性的关键，这通常通过配合 aria 属性和焦点管理实现。合理的聚焦顺序可以帮助屏幕阅读器用户快速定位到可操作的控件。
实现思路包括：打开模态后，将对话框中的第一个可聚焦元素设为焦点；背景内容的 tab-order 通常需要通过应用 tabindex="-1" 将其移出，以确保用户不会通过 Tab 键误跳出对话框。
自定义控件的无障碍实现
当你用原生表单以外的元素实现自定义控件时，确保控件在键盘上可聚焦并且具备可访问的行为，这通常需要给控件加 tabindex，并实现键盘事件处理（如箭头键、回车、空格等）。
同时，提供明确的 ARIA 属性或角色，是帮助屏幕阅读器用户理解控件功能的关键。
键盘导航实战应用
在复杂布局中实现可控的焦点顺序
在具有大量区域和控件的页面中，合理安排 tabindex 可以提升可访问性和可用性，尤其是对移动端的辅助导航而言。
要点包括：避免在同一组不相关元素之间使用过多正整数；优先使用自然文档顺序，只有遇到明确需要改变时才使用它们。
快速示例：模态对话框的聚焦处理
打开模态后，第一时间将焦点聚焦到对话框内的首个可聚焦元素，确保屏幕阅读器的提示与页面的焦点路径一致，此时背景的内容应通过 aria-hidden 或 tabindex 被“屏蔽”以避免干扰。
一个简单的实现思路是：在打开模态时，使用 focus() 将焦点移动到对话框的特定按钮，并在关闭时回到原始触发元素。
常见误区与注意事项
误区：滥用 tabindex
常见的误区是对所有非本来可聚焦的元素都加 tabindex，从而打乱了自然的聚焦逻辑；这会降低可访问性，特别是对使用屏幕阅读器的用户。
正确的做法是：尽量保留原生聚焦元素的行为，仅在必要时对非原生元素添加 tabindex，并且不要将大型块级容器设为可聚焦，除非它本身就是一个可控的自定义组件。
需要避免的常见坑
不要在同一页面中混合使用过多的正整数 tabindex，这会使焦点路径变得难以预测与维护；优先保持页面的文档顺序为主，使用 tabindex 作为补充。
在涉及弹窗、菜单等可聚焦区域时，别忘了为使用者提供可预测的焦点回归点，例如在关闭弹窗后将焦点返回到触发按钮，这通常通过 element.focus() 实现。
