The tabindex global attribute indicates if its element can be focused, and if/where it participates in sequential keyboard navigation (usually with the Tab key, hence the name). It accepts an integer as a value, with different results depending on the integer's value:
-
A negative value (usually
tabindex="-1") means that the element should be focusable, but should not be reachable via sequential keyboard navigation. Mostly useful to create accessible widgets with JavaScript.
This is useful when you have an off screen content which appears on a specific Event. You won't be able to focus any element with a negative tabindex using your Keyboard, but you can do so by calling the focus() method.
-
tabindex="0"means that the element should be focusable in sequential keyboard navigation, but its order is defined by the document's source order.
CSS Positioning won't affect your Tab Order, it would only change the Visual Order of your Elements. Tab Order corresponds to the DOM order!
-
A positive value means the element should be focusable in sequential keyboard navigation, with its order defined by the value of the number. That is,
tabindex="4"would be focused beforetabindex="5", but aftertabindex="3". If multiple elements share the same positivetabindexvalue, their order relative to each other follows their position in the document source.
It is not recommended to give positive values to your elements, you will end up jumping between them, and it is going to be confused to manipulate between your Element's tabindex attribute values. Instead, focus on writing them in a suitable DOM sequence.
If we set the tabindex attribute on a <div>, then its child content cannot be scrolled with the arrow keys unless we set tabindex on the content too. Check out this fiddle to understand the scrolling effects of tabindex.
Note: The maximum value for tabindex is 32767. If not specified, it takes the default value -1.
Specifications
| Specification | Status | Comment |
|---|---|---|
| HTML Living Standard The definition of 'tabindex' in that specification. |
Living Standard | No change from latest snapshot, HTML 5.1 |
| HTML 5.1 The definition of 'tabindex' in that specification. |
Recommendation | Snapshot of HTML Living Standard, no change from HTML5 |
| HTML5 The definition of 'tabindex' in that specification. |
Recommendation | Snapshot of HTML Living Standard. From HTML 4.01 Specification, the attribute is now supported on all elements (global attributes). |
| HTML 4.01 Specification The definition of 'tabindex' in that specification. |
Recommendation | Only supported on <a>, <area>, <button>, <object>, <select>, and <textarea>. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
| Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | Yes | Yes | Yes | Yes | Yes | Yes |
| Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| Basic support | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
See also
- All global attributes.
HTMLElement.tabIndexthat reflects this attribute.- Accessibility problems with tabindex: see Don’t Use Tabindex Greater than 0 by .Adrian Roselli