Bootstrap 3中的tabindex
属性是干什么的?
它的文档并没有提到任何关于它们的信息,尽管它们实际上在所有的模态中都使用它们。
我只发现这是关于它的使用,这并不能说明什么
用于键盘和辅助技术用户的可访问工具提示 对于使用键盘导航的用户,特别是使用辅助技术的用户,您应该只向可用于键盘的元素添加工具提示,例如链接、表单控件或任何具有tabindex="0“属性的任意元素。
我发现了-1
。
发布于 2015-10-02 17:01:33
tabindex
属性显式地定义了页面中可聚焦元素(通常是链接和表单控件)的导航顺序。它也可以用来定义元素是否应该是可聚焦的。tabindex="0"
和tabindex="-1"
都有其特殊的含义,并在HTML中提供了不同的功能。值0
表示元素应按默认导航顺序放置。这允许本机不可聚焦的元素(如<div>
、<span>
和<p>
)接收键盘焦点。当然,通常应该对所有交互元素使用链接和表单控件,但这确实允许其他元素具有可聚焦性并触发交互。tabindex="-1"
值从默认导航流中移除元素(即用户不能向其选项卡),但允许它接收编程焦点,这意味着焦点可以从链接或脚本中设置到它。**对于不应该被标签到但可能需要将焦点设置为的元素来说,非常有用。 一个很好的例子是模式对话框窗口-当打开时,焦点应该设置到对话框上,这样屏幕阅读器将开始读取,而键盘将开始在对话框中导航。由于对话框(可能只是一个<div>
元素)在默认情况下是不可聚焦的,所以当它出现时,为它分配tabindex="-1"
允许使用脚本将焦点设置到它。-1
的值在使用箭头键或其他快捷键的复杂小部件和菜单中也很有用,以确保小部件中只有一个元素可以使用选项卡键导航,但仍然允许将焦点设置在小部件内的其他组件上。
资料来源: http://webaim.org/techniques/keyboard/tabindex
这就是为什么您需要模态tabindex="-1"
上的<div>
,这样用户就可以访问普通的鼠标和键盘快捷键。希望这能有所帮助。
发布于 2018-05-04 09:18:56
表索引属性与HTML相关联,它不特定于引导。
此属性负责指示是否可通过键盘导航访问元素。
您需要注意三种不同的场景:
tabindex = "0"
添加到元素中时,这意味着它可以通过键盘导航访问,但是由文档源订单定义的。tabindex = "1", tabindex = "2"
)添加一个正值时,这些元素可以通过键盘导航访问,而order 是由属性值定义的。tabindex="-1"
)中时,意味着该元素在键盘导航中不可访问,但可以使用JS.中的focus函数聚焦。https://stackoverflow.com/questions/32911355
复制相似问题