The tabindex global attribute is an integer indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation, and if so, at what position. It can take several values:
- a negative value means that the element should be focusable, but should not be reachable via sequential keyboard navigation;
0means that the element should be focusable and reachable via sequential keyboard navigation, but its relative order is defined by the platform convention;- a positive value means should be focusable and reachable via sequential keyboard navigation; its relative order is defined by the value of the attribute: the sequential follow the increasing number of the tabindex. If several elements share the same tabindex, their relative order follows their relative position in the document.
An element with a 0 value, an invalid value, or no tabindex value should be placed after elements with a positive tabindex in the sequential keyboard navigation order.
If we set the tabindex attribute on a <div>, then its child content cannot be scrolled using 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 should not exceed 32767. If not specified, it takes the default value -1.
Specifications
| Specification | Status | Comment |
|---|---|---|
| WHATWG HTML Living Standard The definition of 'tabindex' in that specification. |
Living Standard | No change from latest snapshot, HTML5.1 |
| HTML5.1 The definition of 'tabindex' in that specification. |
Recommendation | Snapshot of WHATWG HTML Living Standard, no change from HTML5 |
| HTML5 The definition of 'tabindex' in that specification. |
Recommendation | Snapshot of WHATWG 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
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
| Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | (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 | Adrian Roselli.
Document Tags and Contributors
Tags:
Contributors to this page:
chrisdavidmills,
akshayjai1,
asazernik,
nickgibson-advanced,
de5peratelighter,
Modified,
stephaniehobson,
bedwards,
Dorward,
teoli
Last updated by:
chrisdavidmills,