什么是tabindex =“-1"?在引导中 [英] What's the tabindex="-1" in bootstrap for

问题描述

Bootstrap 3中的tabindex属性有什么用?

尽管他们实际上在所有模态中都使用它们，但其文档中没有提及任何内容.

我只是发现了它的用途，并没有说太多

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

对于使用键盘导航的用户，特别是辅助技术的用户，您应仅将工具提示添加到可键盘聚焦的元素(如链接，表单控件或任何tabtab ="0"的任意元素)中.属性.

我发现如果属性不是-1 .

• 按esc键(带有tabindex)后的模式关闭
• 按esc键(不带tabindex)后，模块未关闭

解决方案

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"的原因，以便用户可以访问常见的鼠标和键盘快捷键.希望有帮助.

What's the tabindex attribute in Bootstrap 3 for?

Its documentation doesn't say anything about them although they use them practically in all modals.

I've only find this regarding its use, which doesn't really say much

Accessible tooltips for keyboard and assistive technology users

For users navigating with a keyboard, and in particular users of assistive technologies, you should only add tooltips to keyboard-focusable elements such as links, form controls, or any arbitrary element with a tabindex="0" attribute.

And I found out I can't press esc to hide a modal if the tabindex attribute is not -1.

• Modal closing after pressing esc key (with tabindex)
• Modal not closing after pressing esc key (without tabindex)

解决方案

The tabindex attribute explicitly defines the navigation order for focusable elements (typically links and form controls) within a page. It can also be used to define whether elements should be focusable or not.

[Both] tabindex="0" and tabindex="-1" have special meaning and provide distinct functionality in HTML. A value of 0 indicates that the element should be placed in the default navigation order. This allows elements that are not natively focusable (such as <div>, <span>, and <p>) to receive keyboard focus. Of course one should generally use links and form controls for all interactive elements, but this does allow other elements to be focusable and trigger interaction.

A tabindex="-1" value removes the element from the default navigation flow (i.e., a user cannot tab to it), but it allows it to receive programmatic focus, meaning focus can be set to it from a link or with scripting.** This can be very useful for elements that should not be tabbed to, but that may need to have focus set to them.

A good example is a modal dialog window - when opened, focus should be set to the dialog so a screen reader will begin reading and the keyboard will begin navigating within the dialog. Because the dialog (probably just a <div> element) is not focusable by default, assigning it tabindex="-1" allows focus to be set to it with scripting when it is presented.

A value of -1 can also be useful in complex widgets and menus that utilize arrow keys or other shortcut keys to ensure that only one element within the widget is navigable with the tab key, but still allow focus to be set on other components within the widget.

Source: http://webaim.org/techniques/keyboard/tabindex

This is why you need tabindex="-1" on the modal <div>, so users can access common mouse and keyboard shortcuts. Hope that helps.

这篇关于什么是tabindex =“-1"?在引导中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！