twitter-bootstrap 引导程序中的 tabindex="-1" 是什么

What's the tabindex="-1" in bootstrap for

提问by Alvaro

What's the tabindexattribute in Bootstrap 3 for?

tabindexBootstrap 3 中的属性是什么？

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.

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

对于使用键盘导航的用户，特别是辅助技术的用户，您应该只向键盘焦点元素添加工具提示，例如链接、表单控件或任何具有 tabindex="0" 属性的任意元素。

And I found out I can't press escto hide a modal if the tabindexattribute is not -1.

而且我发现我不能按esc到隐藏模式，如果tabindex属性不是-1。

• Modal closing after pressing esckey (with tabindex)
• Modal not closing after pressing esckey (without tabindex)

• esc按键后模态关闭（使用 tabindex）
• 按下esc键后模态不关闭（没有tabindex）

回答by Kyle Anderson

The tabindexattribute 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 0indicates 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 readingand the keyboard will begin navigatingwithin 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 -1can also be useful in complex widgets and menus that utilize arrow keys or other shortcut keysto 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.

该tabindex属性明确定义页面内可聚焦元素（通常是链接和表单控件）的导航顺序。它还可以用于定义元素是否应该是可聚焦的。

[两者]tabindex="0"和tabindex="-1"具有特殊含义并在 HTML 中提供独特的功能。值0指示元素应按默认导航顺序放置。这允许本身不可聚焦元件（例如<div>，<span>和<p>），以接收键盘焦点。当然，通常应该为所有交互元素使用链接和表单控件，但这确实允许其他元素可聚焦并触发交互。

一个tabindex="-1"值从默认导航流中删除元素（即，用户不能用 Tab 键访问它），但它允许它接收编程焦点，这意味着可以通过链接或脚本设置焦点。** 这可能非常对于不应该被标签到的元素很有用，但可能需要将焦点设置为它们。

一个很好的例子是模态对话框窗口——打开时，焦点应该设置在对话框上，这样屏幕阅读器将开始阅读，键盘将开始在对话框内导航。因为对话框（可能只是一个<div>元素）在默认情况下是不可聚焦的，分配它tabindex="-1"允许在它出现时通过脚本设置焦点。

值-1在复杂的小部件和菜单中也很有用，这些小部件和菜单使用箭头键或其他快捷键来确保小部件中只有一个元素可使用 Tab 键导航，但仍允许将焦点设置在小部件中的其他组件上。

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

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

回答by Nesha Zoric

The tabindexattribute is associated with HTML, it is not specific to Bootstrap.

该的tabindex属性与HTML相关的，它不是特定于引导。

This property is responsible for indicating if an element is reachable by keyboard navigation.

此属性负责指示元素是否可通过键盘导航访问。

You need to look out for three different scenarios:

您需要注意三种不同的情况：

1. When adding tabindex = "0"to an element this means it is reachable by the keyboard navigation but the order is defined by the documents source order.

2. When adding a positive valueto the tabindex attribute (for example tabindex = "1", tabindex = "2") those elements are reachable by keyboard navigation and the order is defined by the value of the attribute.

3. When adding a negative valueto tabindex (usually tabindex="-1") it means the element is not reachable by the keyboard navigation, but can be focused using focus function in JS.

1. 添加tabindex = "0"到元素时，这意味着可以通过键盘导航访问它，但顺序由文档源顺序定义。

2. 当向tabindex 属性（例如tabindex = "1", tabindex = "2"）添加正值时，这些元素可通过键盘导航访问，并且顺序由属性值定义。

3. 当向tabindex添加一个负值（通常是tabindex="-1"）时，这意味着该元素无法通过键盘导航访问，但可以使用 JS 中的 focus 功能聚焦。