[HTML] 了解 tabindex 属性

本帖由 DeepL 翻译。如有任何翻译错误,请告知我们!

什么是 tabindex?

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

tabindex 值和含义

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

1. tabindex="0"

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

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

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

2. tabindex="-1"

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

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

3. tabindex="positive"

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

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

何时使用?

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

  • tabindex="0"

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

    • 模态或对话:打开模态窗口时,将tabindex="-1" 应用于背景内容以禁用键盘导航。

总结

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

总结如下

  1. 尽可能遵循 HTML 的自然流程
  2. 避免使用正 tabindex 值
  3. tabindex="0"仅用于交互式元素
  4. tabindex="-1"仅用于需要程序聚焦的元素
  5. 与 ARIA 属性结合使用,以实现最大程度的无障碍性
❤️ 0
🔥 0
😎 0
⭐️ 0
🆒 0