[HTML] 了解 tabindex 属性

什么是 tabindex？

tabindextabindex 是一个全局属性，用于控制 HTML 元素是否可以接收键盘焦点，如果可以，则以何种顺序接收。当用户按键盘上的Tab 或Shift + Tab 键在网页中的元素（链接、按钮、输入框等）之间移动时，该tabindex 属性会决定它们的顺序和行为。

tabIndex 该属性取整数值，根据值的不同，其行为也完全不同。

使元素可通过键盘导航。交互式内容（a 、button 、input 、textarea 等......）的默认值为 0，即使您没有指定也是如此。但是，非交互式内容的默认值为-1，因此如果要通过键盘导航，必须给它一个大于 0 的值，如tabindex=0。

这主要用于使默认情况下不接收焦点的容器元素可以通过键盘访问。

html

<div tabindex="0" role="button">div로 만들어진 버튼!</div>

将元素排除在键盘导航之外。除非另有说明，否则非交互式内容的默认值为-1。它不会通过 Tab 键聚焦，但可以通过编程实现。

html

<div id="myModalContent" tabindex="-1">모달 내용...</div>
<script>
  document.getElementById('myModalContent').focus();
</script>

为元素提供明确的制表顺序。1从，开始，数字较小的元素将按顺序获得焦点。数字相同的元素将按照 HTML 源代码的顺序获得关注。

更多信息，请参见 ⚠️：被视为反模式 正tabindex可能会让用户（尤其是键盘和屏幕阅读器用户）感到困惑，并且由于强制设定的焦点顺序与文档的逻辑结构不同，会损害网页的可访问性。它还会给维护工作带来困难。

tabindex乍一看似乎是个好主意，但使用时应谨慎。

tabindex="0"
- 创建自定义交互式元素：当您想为难以作为语义 HTML 元素实现的自定义 widget（如您使用<div> 、<span> 等自行创建的按钮、标签、滑块、菜单项等）提供键盘辅助功能时，请使用它。在这种情况下，建议在 JavaScript 中添加处理键盘事件（回车、空格等）的逻辑，使元素表现得像真正的交互式元素，并指定适当的 aria-role，让屏幕阅读器用户知道元素的作用。
- 在制表符顺序中包含**元素：**当你想在制表符顺序中包含默认情况下不会获得焦点的非交互式内容时，比如你想突出显示的文本块，就可以使用这种方法。
tabindex="-1"
- 模态或对话：打开模态窗口时，将tabindex="-1" 应用于背景内容以禁用键盘导航。

Tabindex 在使网站更易于访问和改善用户体验方面可以发挥巨大作用。不过，如果使用不当，也会造成混乱，因此请确保了解其默认行为并谨慎使用。

总结如下