Tabindex - What is it, what's it for and should I use it? article By Adrian Rayfield
Last edited: 16.01.2008
What is Tabindex?
Tabindex determines the order in which tags that have a tabindex assigned to them are selected with each press of the tab key. Like accesskey, tabindex is (x)HTML code and is coded like this:
<a href="index.htm" accesskey="1" tabindex="1">Home Page</a>
The tabindex attribute can be applied to the following elements; A, AREA, BUTTON, INPUT, OBJECT, SELECT and TEXTAREA.
We have not used tabindex on this site for reasons explained later in this article.
What is Tabindex for?
Tabindex is used to determine the tabbing order of tags via the tab key. You assign a number from 1 to 32767 - negative numbers are not allowed and a 0 (Zero) is the same as no tabindex at all.
When coding tabindex, you do not have to start with 1 then use 2, 3, 4 etc. You can, if you prefer, start at 10 and then use 20, 30 or 100, 200 etc. Tabindex are ascending numbers, so any order can be used and there is no need to worry that if you have tabindexes of 10 followed by 20, you don't need to tab another 9 times to reach tabindex 20 as it will tab with one key press.
Top Tip: If you use tabindex, 
leave a few extra numbers between elements as this
allows you to add additional elements with tabindex between your existing elements. For example, if you start with 100 and the next
tabindex used is 200, you have the option of adding an extra 180 (101,102,103 etc) whereas if you used 1,2,3 etc you cannot add any
other tabindexes elements before you need to re-code all your code. I would, however, never code in increments less than 10 (110, 120,
130 etc). Coding in this way will allow your site to grow and have the flexibility of being able to add more tabindexes.
The default order of tabbing may not always be logical; this is where tabindex comes in as it allows you to specify the tabbing order.
People who may make use of this accessibility feature are:
- Users with restrictive movement, arthritis or those who simply cannot hold a mouse
- Blind or visually impaired users
- People who prefer to use a keyboard rather than a mouse
Should I use Tabindex?
The WCAG 1.0 guidelines states:
9.4: Create a logical tab order through links, form controls, and objects. [Priority 3]
For example, in HTML, specify tab order via the "tabindex" attribute or ensure a logical page design.
So to comply with WCAG 1.0 AAA, you must provide a logical tab order through links, form controls and objects or ensure a logical page design.
The wording of this guideline is important; provide a logical tab order or ensure a logical page design. The last part of the statement is an advantage to developers for reasons I shall explain now.
If a table design is used or, in some designs, a default tab order may not be logical, or if a CSS positioned design is used for example, it can be coded with a logical tab order and there is no need for tabindex. Some simple re-coding could solve any tabbing problems.
As you have no doubt come to expect by now with accessibility, using tabindex can cause problems and even confusion for some users. Why is this the case?
If tabindex is used in conjunction with a ‘skip link’ in certain browsers, it makes the ‘skip link’ useless. Imagine this scenario; you have a ‘skip link’ and assigned a tabindex of 1 to it. You then have the next links; home, contact, about us with tabindex 2, 3, and 4 respectively as this is a logical order.
You navigate to your site and press the tab key once taking you to the ‘skip link’, 
so you jump over the navigation and go to the content; you then hit the tab key again expecting to move to the next link in the content
area but instead you jump back to either the skip link or the home page link with the assigned tabindex of 2! You end up going around in
a loop and not being able to navigate the site without tabbing through all the links and therefore making the ‘skip link’ redundant.
This is why we took the decision not to use tabindex on this site as we felt that a ‘skip link’ is of more use and our tabbing order is a logical one.
Both ‘skip link’ and tabindex are listed under priority 3 of the WCAG 1.0:
13.6: Group related links, identify the group (for user agents) and, until user agents do so, provide a way to bypass the group. [Priority 3]
9.4: Create a logical tab order through links, form controls, and objects. [Priority 3]
For example, in HTML, specify tab order via the "tabindex"
attribute or ensure a logical page design.
So should you use them? It depends on your site. If your site is coded so that you have a logical tab order such as a CSS positioned site, then there is no real need and ‘skip link’ would be of more use.
If, however, your tab order is not a logical one, then tabindex may need to be used if re-coding isn't an option.
Article written and copyright held by Adrian Rayfield of Rayfields Accessibility © 2006.
Did you find this article / tutorial useful, please give us your comments.
Required fields marked with a *
