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 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
"1", and sidebar links given a
"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.
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
tabindex has been set. As such, great care
must be taken to ensure that adding a
doesn’t harm the usability of the page as a whole.
disabled attribute is set on
an element which has a
tabindex will be ignored.
is set for the form control below:
<form> ⋮ <label for="pin">Your 4-digit PIN:</label> <input type="password" name="pin" id="pin" tabindex="2"/> ⋮ </form>
This attribute can take only a number as its value.
tabindex for this element is generally good, but
there are a couple of quirks to be aware of. If you were to specify five
text inputs with respective
tabindex values of
"-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).
<div><input tabindex="2" value="Should be second"></div> <div><input tabindex="1" value="Should be first"></div> <div><input tabindex="3" value="Second be third"></div> <div><input tabindex="-1" value="Should be ignored"></div> <div><input tabindex="0" value="Follow after tabindex"></div>
Internet Explorer versions 7 and earlier would start with input 5—the one
tabindex value of
"0"—rather than input
"2" which is
where it should start.