Skip to: content, navigation

by Ian Lloyd

tabindex (HTML attribute)

Browser support full matrix
IE5.5+ FF1+ Saf1.3+ Op9.2+
Full Full Full Full
Spec
Depr. Version
No HTML 3.02
tabindex="number"

Example

The tabindex is set for both form controls below:

<form>
<label for="perfectday">Describe your perfect day:</label>
<textarea id="perfectday" tabindex="1" name="perfectday"
accesskey="d" cols="40" rows="10">Sitting by the beach, sipping a cocktail</textarea>
<input type="submit" value="Tell us" tabindex="2" />
</form>

Description

The tabindex is used to define a sequence that the user follows when using the tab key to navigate through a page. By default, the natural tabbing order will match the source order in the markup. In certain circumstances, however, it may be necessary to override the default tabbing order, but it is strongly recommended that you craft a page in a logical flow and let the user agent work through in the order, thus negating the need for the tabindex attribute altogether.

A tabindex can start at 0 and increment in any value, so 1, 2, 3, 4, 5 would be fine, as would 10, 20, 30, 40, 50. If you are required to introduce a tabindex, it is advisable to use a sequence as that does have intervals (like 10, 20), which will give you the opportunity, at a later date, of injecting other controls in between (e.g. 10, 15, 20), without having to re-index all the tabindex values on the page. Should more than one element have the same tabindex value applied in error, the tabbing order of those affected elements will be as per the source markup order.

If a tabindex is set anywhere on a page - even if it is the 100th link or 50th form control - the tab order will start at the element with the lowest tabindex value, work through the increments and only then will go through the remaining tab-able elements on the page that have no tabindex set, so great care must be taken to ensure that adding a tabindex does not harm the usability of the page as a whole.

If the element with the tabindex also has the disabled attribute set, the tabindex is ignored.

Value

Number only

Compatibility

IE5.5Full
6.0Full
7.0Full
Firefox1.0Full
1.5Full
2.0Full
Safari1.3Full
2.0Full
3.0Full
Opera9.2Full
9.5Full

Causes no compatibility issues. It has excellent support across all tested browsers.

User-contributed notes

There are no comments yet.

Add a note

To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.

Related Products

The Principles of Beautiful Web Design

Best Seller!

You don’t need to go to Art School to design great looking web sites!

Book Cover: The Principles of Beautiful Web Design

Download the FREE sample chapters