Description

The tabindex is used to define a sequence that users follow when they use 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 it may be necessary to override the default tabbing order, but it’s strongly recommended that you craft a page in a logical flow and let the browser work through it in the default order—an approach that negates the need for the tabindex attribute.

A tabindex can start at 0 and increment in any value. As such, the sequence 1, 2, 3, 4, 5 would be fine, as would 10, 20, 30, 40, 50. If you need to introduce a tabindex, it’s advisable to use a sequence that contains intervals (like the second example provided), as this will give you the opportunity to inject other controls later if need be (for example, 10, 15, 20) without having to reindex all the tabindex values on the page. Should a given tabindex value be applied to more than one element (e.g. all links in one section given a tabindex of "1", and sidebar links given a tabindex of "2"), the tabbing order of those affected elements will be as per the source markup order. Many people will choose to use this approach rather than a sequence with a defined interval, such as 5, 10, 15, because it allows for additional links or form controls to be added without the headache of re-numbering. If a tabindex of "-1" is used, the element it’s applied to will no longer be keyboard focusable.

If a tabindex is set anywhere on a page—even if it’s the hundredth link or the fiftieth form control—the tab order will start at the element with the lowest tabindex value, and work through the increments. Only then will the tab order take in the remaining elements for which no tabindex has been set. As such, great care must be taken to ensure that adding a tabindex doesn’t harm the usability of the page as a whole.

If the disabled attribute is set on an element which has a tabindex, that tabindex will be ignored.

Value

This attribute takes a numerical value only.

Compatibility

Support for tabindex for this element is generally good, but there are a couple of quirks to be aware of. If you were to specify five buttons with respective tabindex values of "2", "1", "3", "-1" (to indicate that the element should not receive tab focus) and "0" (meaning that it should just follow normal source order after looping through those with tabindex values set), most correctly jumped through the correct sequence (namely button 2, button 1, button3, then button 5 (ignoring button 4).

<button tabindex="2">Should be second</button>
<button tabindex="1">Should be first</button>
<button tabindex="3">Second be third</button>
<button tabindex="-1">Should be skipped/ignored</button>
<button tabindex="0">Follow after tabindex</button>

However, Internet Explorer versions 7 and earlier would start with button five—the one with a tabindex value of "0"—rather than button two which is where it should start.