What's the tabindex="-1" in bootstrap for
Solution 1
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"
andtabindex="-1"
have special meaning and provide distinct functionality in HTML. A value of0
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 ittabindex="-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.
Solution 2
The tabindex attribute is associated with HTML, it is not specific to Bootstrap.
This property is responsible for indicating if an element is reachable by keyboard navigation.
You need to look out for three different scenarios:
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.When adding a positive value to 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.When adding a negative value to tabindex (usually
tabindex="-1"
) it means the element is not reachable by the keyboard navigation, but can be focused using focus function in JS.
Related videos on Youtube
Alvaro
Web developer. Working mainly with JavaScript (node, knockout.js), jQuery, CSS, PHP (laravel, CakePHP). Creator of fullPage.js and pagePiling.js.
Updated on November 19, 2021Comments
-
Alvaro over 2 years
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 thetabindex
attribute is not-1
. -
Lutz Prechelt almost 8 yearsThe attribute is part of HTML, it has nothing to do with Bootstrap specifically.
-
Kyle Anderson almost 8 yearsYes, that's exactly what is being said here, that it's a "distinct functionality in HTML" and not something to do with Bootstrap.
-
Canada Wan over 5 yearsTo be able to focus on a <div> with JavaScript, the tabindex attribute MUST be defined on this element (any values such as tabindex=-1). If tabindex is not present on the div, focusing will not work. This is why BS adds tabindex=-1 to the modal div. See developer.mozilla.org/en-US/docs/Web/Accessibility/…: if tabindex is not present, the focusable with JS will follow the platform convention of the element (yes for form controls, links, etc.). This means <div> is not focuable if tabindex is not present.
-
Black Mantha over 4 yearsWorth adding that elements with tabindex="-1" are also focusable by clicking on them.