bootstrap中的tabindex="-1”有什么用

4ioopgfo  于 2022-12-25  发布在  Bootstrap
关注(0)|答案(2)|浏览(961)

Bootstrap 3中的tabindex属性有什么用?
它的文档没有提到它们,尽管它们实际上在所有模态中都使用它们。
我只在使用方面发现了这个,其实没什么意义

键盘和辅助技术用户可访问的工具提示

对于使用键盘导航的用户,尤其是使用辅助技术的用户,应仅向可聚焦于键盘的元素(如链接、表单控件或任何具有tabindex=“0”属性的任意元素)添加工具提示。
我发现了I can't press esc to hide a modal if the tabindex attribute is not -1

shstlldc

shstlldc1#

tabindex属性显式定义页面中可聚焦元素(通常是链接和表单控件)的导航顺序。它还可用于定义元素是否应可聚焦。
tabindex="0"tabindex="-1"具有特殊含义,在HTML中提供不同的功能。0值指示元素应按默认导航顺序放置。这允许不能本机聚焦的元素(例如<div><span><p>)来接收键盘焦点。当然,通常应该对所有交互式元素使用链接和表单控件,但这确实允许其他元素可聚焦并触发交互。
tabindex="-1"会从默认导航流中删除元素(即用户无法切换到它),但它允许它接收编程焦点,这意味着可以通过链接或脚本将焦点设置到它。这对于不应切换到但可能需要将焦点设置到它们的元素非常有用。
一个很好的例子是一个模态对话框窗口-当打开时,焦点应该设置到对话框,这样屏幕阅读器将开始阅读,键盘将开始在对话框内导航。因为对话框(可能只是一个<div>元素)在默认情况下是不可聚焦的,分配给它tabindex="-1"允许在它出现时通过脚本设置焦点。
-1值在复杂的小部件和菜单中也很有用,这些小部件和菜单使用箭头键或其他快捷键来确保小部件中只有一个元素可以使用Tab键导航,但仍然允许将焦点设置在小部件中的其他组件上。

来源:http://webaim.org/techniques/keyboard/tabindex

这就是为什么在模态<div>上需要tabindex="-1",这样用户就可以访问常用的鼠标和键盘快捷键。

ix0qys7i

ix0qys7i2#

tabindex属性与HTML相关联,它并非特定于 Bootstrap 。
此属性负责指示是否可以通过键盘导航访问元素。
您需要注意三种不同的情况:
1.将tabindex = "0"添加到元素时,这意味着可以通过键盘导航访问该元素,但顺序由文档源顺序定义。
1.当向tabindex属性(例如tabindex = "1", tabindex = "2")添加正值时,这些元素可通过键盘导航访问,并且顺序由属性值定义。
1.当向tabindex(通常为tabindex="-1")添加负值时,表示该元素无法通过键盘导航访问,但可以使用JS中的focus函数获得焦点。

相关问题