HTML tabindex Attribute

The tabindex attribute on an element specifies the tab order relative to the other controls on the page. The tabindex value indicates when its area can be focused.

Example

#

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">

Using tabindex

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.


Syntax

<tag tabindex="index" />

Values

#

Value Description
index Numeric value used to specify the tab order.

More Examples

Four tabbable elements. Click the first input field and press the Tab key 3 times.
To visualize tabindex, elements with focus have a  gold  background.

1.

2.

3.

4.
<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>

What elements can have a tabindex?

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.

  • <a> with an href and when not disabled
  • <area> with an href and when not disabled
  • <input> when not disabled
  • <select> when not disabled
  • <button> when not disabled
  • <textarea> when not disabled
  • <iframe> when not disabled
  • Any element with a tabindex value
  • Any element with contentEditable='true' (rarely used)

Recall that with tabindex="0" any element can be made to receive keyboard focus.


Finding focusable elements

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;
}

Elements using the tabindex attribute

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

Browser support

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

You may also like



Guides