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:

• a
• area
• button
• input
• object
• select
• textarea

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>
        

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. When tabindex is used on links, Opera allows tabbing to links—but only to the links with tabindex attributes 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 full tabindex support, go the System Preferences keyboard shortcuts and check the Turn on full keyboard access 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.