Keyboard Accessibility
Altering the Default Tab Order Using tabindex
Article Contents
- Page 1: Introduction to Keyboard Accessibility
- Page 2: Providing Keyboard Shortcuts Using accesskey
- Current page: Page 3: Altering the Default Tab Order Using tabindex
Overview
The tabindex attribute was created to allow
web developers to customize the tab order of web content. Most of the time,
tabindex is not necessary. It should only be
used in cases where the default tab order is not ideal and when the tab
order cannot be changed by rearranging items in the content and/or by altering
the style sheet to reflect the best visual arrangement. These cases are
rare. In almost all circumstances, WebAIM recommends against using tabindex.
The tabindex Attribute,
According to Specification
The tabindex attribute can apply to the following elements:
aareabuttoninputobjectselecttextarea
The tabindex is added within the elements,
as in the example below:
<a href="http://www.webaim.org/" tabindex="10">WebAIM.org</a>
<form action="submit.htm" method="post">
<label for="name">Name</label>
<input type="text" id="name" tabindex="20" />
<input type="submit" id="submitform" tabindex="30" value="Submit" />
</form> Note
Using larger numbers, such as 10, 20, 30 or even 100, 200, 300 may be better
than using small numbers, because this allows developers to add additional
tabindex attributes in between the already existing ones, without
having to re-number all of the tabindex attributes.
Browser Support
Browser support is fairly good for tabindex. Modern browsers
support tabindex with the following exceptions:
- Camino does not support
tabindex. - Firefox for Mac does
not yet support
tabindex(the Windows version does). - Opera 7+ does support
tabindex, but treats it differently than most browsers. The default behavior for Opera is to allow tabbing only to form elements. The A key is normally used to go from link to link, and the Q key is used to go backwards through links. Whentabindexis used on links, Opera allows tabbing to links—but only to the links withtabindexattributes specified. To reach the other links, the user must press either the A key or the Q key . This behavior can be a bit confusing for users, but it works. - Safari 1.2 does support
tabindex(earlier versions do not), but the default setting is only partial support. To turn on fulltabindexsupport, go the keyboard shortcuts and check the check box.
Drawbacks to tabindex
The main problem with tabindex is that it can
create an illogical tab order, even though its very purpose is to
ensure that the tab order is logical. For example, even if it might
make sense to the developer to have the user tab halfway down the
page to a specific link rather than to the main navigation, the user
may get confused. It is best not to surprise the user with unexpected
behaviors. Adding tabindex to hypertext links
can be especially confusing for Opera users, due to the way in which
keyboard accessibility works in Opera. Screen
reader users are especially susceptible to getting confused at illogical
tab orders. For one thing, an altered tab order creates a situation
in which the normal reading order does not match the tab order. Screen
reader users may become disoriented.
The other reason that tabindex can be a drawback
is that developers may be tempted to use it as a way to make up for
sloppy or illogical reading order. The best way to fix tab order
and reading order is to alter the order of the content in the markup
itself, rather than try to hide the problem by using tabindex.
Can tabindex be used legitimately to enhance
accessibility? Yes, but because those instances are rare, it is probably
best to pay more attention to the actual reading order, and forget
about tabindex entirely.
WebAIM is an initiative of:
