tabindex属性有什么作用？

tabindex 属性控制网页元素是否可以获得键盘焦点，以及它们获得焦点的顺序。它在创建可访问的网页和改善用户体验方面起着至关重要的作用。

以下是 tabindex 属性值的含义：

• tabindex="0": 这使得元素可以通过键盘获得焦点，并按照其在文档源代码中出现的顺序进行 tab 导航。 这是使原本不可聚焦的元素（例如 <div>, <span>, <p> 等）可聚焦的最常用方法。

• tabindex="-1": 这使得元素可以通过 JavaScript 或链接（例如，通过 #element-id）获得焦点，但不能通过 Tab 键顺序获得焦点。这对于创建自定义键盘导航或通过 JavaScript 管理焦点非常有用，例如在模态窗口或下拉菜单中。

• tabindex="1" 或其他正整数: 这允许您明确定义 Tab 键的导航顺序。tabindex="1" 的元素将首先获得焦点，然后是 tabindex="2" 的元素，以此类推。 不建议使用正整数的 tabindex 值，因为它会破坏预期的 Tab 键顺序，并使键盘导航难以预测，尤其是对于使用屏幕阅读器的用户。 尽量只使用 tabindex="0" 和 tabindex="-1"。

一些使用场景：

• 使非交互式元素可交互： 您可以使用 tabindex="0" 使通常不可聚焦的元素（如 <div> 或 <span>）可聚焦，例如，如果您想将键盘事件附加到这些元素上。

• 创建自定义 Tab 顺序： 虽然不推荐，但您可以使用正整数 tabindex 值来创建自定义 Tab 顺序。

• 从 Tab 顺序中移除元素： 使用 tabindex="-1" 可以将元素从 Tab 顺序中移除，例如，如果您有一个在特定上下文中不应获得焦点的元素。

• 改进可访问性： tabindex 属性对于创建可访问的 Web 应用程序至关重要，因为它允许键盘用户与所有交互式元素进行交互。

• 动态更改 Tab 顺序： 您可以使用 JavaScript 动态更改 tabindex 值，以响应用户交互或其他事件。

示例：

<div tabindex="0">可通过 Tab 键聚焦的 div</div>
<button>可通过 Tab 键聚焦的按钮</button>
<span tabindex="-1" id="off-tab">无法通过 Tab 键聚焦，但可以通过 JavaScript 聚焦的 span</span>
<a href="#off-tab">聚焦到 span</a>
<div tabindex="2">不推荐：使用正整数 tabindex</div>
<div tabindex="1">不推荐：使用正整数 tabindex</div>

在这个例子中，div、button 和两个带有正整数 tabindex 的 div 都可以通过 Tab 键聚焦。带有 tabindex="-1" 的 span 不能通过 Tab 键聚焦，但可以通过链接聚焦。 注意，即使第二个带有正整数 tabindex 的 div 的值较小，带有 tabindex="1" 的 div 会先获得焦点，这突出了为什么不推荐使用正整数 tabindex 值。

总之，tabindex 属性是一个强大的工具，可以控制键盘焦点，并在正确使用时可以极大地提高 Web 应用程序的可访问性和可用性。 尽量坚持使用 tabindex="0" 和 tabindex="-1"，以避免创建混乱和难以访问的 Tab 顺序。