The tabindex attribute on an element specifies the tab order relative to the other controls on the page.
The tabindex value indicates when the element can be focused.
A tabindex attribute on an <input> element.
The tabindex value on this textfield is 8.
<input tabindex="8"
type="text" name="firstname" placeholder="First Name">
A tabindex specifies the keyboard tab order relative to the other controls on the page.
By default, only elements that are focusable can be reached by keyboard tabbing.
However, elements become focusable with a tabindex="0" setting.
Elements with a negative tabindex are not reachable by keyboard tabbing, but are accessible my mouse or JavaScript.
Note: The tabindex attribute is a global attribute that can be applied to any tag.
<tag tabindex="index" />
| Value | Description |
|---|---|
| index | Numeric value used to specify the tab order. |
Four tabbable elements. Click the first input field and press the
To visualize tabindex, elements with focus have a gold background.
<form action="/tutorial/action.html">
1. <input tabindex="1" type="text" name="firstname" placeholder="First Name"><br /><br />
2. <input tabindex="2" type="text" name="lastname" placeholder="Last Name"><br /><br />
3. <input tabindex="3" type="text" name="email" placeholder="Email"><br /><br />
4. <button tabindex="4" type="submit" >Submit</button>
</form>
The tabindex attribute is a global attribute that can be applied to any element.
However, it is meaningful only on elements that are focusable. Which are these?
There is no official standard, but the list below is supported by all browsers.
tabindex valuecontentEditable='true' (rarely used)Recall that with tabindex="0" any element can be made to receive keyboard focus.
Below is a CSS utility that selects all the above elements and hightlights them.
Adding this to your page will identify all controls that receive focus.
a[href]:not([tabindex^='-']),
area[href]:not([tabindex^='-']),
input:not([disabled]):not([tabindex^='-']),
select:not([disabled]):not([tabindex^='-']),
textarea:not([disabled]):not([tabindex^='-']),
button:not([disabled]):not([tabindex^='-']),
iframe:not([tabindex^='-']),
[tabindex]:not([tabindex^='-']),
[contentEditable=true]:not([tabindex^='-'])
{
background-color:pink;
border:1px dashed red;
}
The tabindex attribute is a global attribute that can be applied to any element.
Click on any tag for an example of that element using an tabindex attribute.
| Tag with tabindex | Description |
|---|---|
| <a> | Creates a link (hyperlink) to another page |
| <area> | Specifies a map area for an image |
| <button> | Creates a clickable button that can contain text or an image |
| <iframe> | Creates a frame in which another web page can be embedded |
| <input> | Creates an input field in which data can be entered |
| <select> | Creates a dropdown control |
| <textarea> | Creates a multi-line text input control, for example for messages |
Here is when tabindex support started for each browser:
 Chrome
|
1.0 | Sep 2008 |
 Firefox
|
1.0 | Sep 2002 |
 IE/Edge
|
1.0 | Aug 1995 |
 Opera
|
1.0 | Jan 2006 |
 Safari
|
1.0 | Jan 2003 |
