Helping Your User With tabindex

There are some tags and attributes within HTML that have been neglected and/or forgotten by many developers. There are many tags and attributes that you may have never heard of before, but could prove to be really useful in an upcoming project.

tabindex Can Make Things Easier

Many of the included tags and attributes within HTML can really help out with the accessibility of any document. One such element that I think may be disregarded by many developers would be tabindex. Proper use of tabindex allows your users to effectively navigate through your document structure using only their keyboard. Most importantly this helps those users who may have a condition preventing them form making effective use of a mouse.

One of the most common uses for tabindex is within forms. Personally I prefer using the keyboard to navigate form fields because I find it tedious to constantly click within a field, fill out the information, then have to revert to the mouse in order to move the cursor to the next field. Using the TAB key on my keyboard helps me to fill out information much more efficiently.

Bad Use of tabindex

On the other hand, there have also been forms which either did not use the tabindex attribute, or used it in an ineffective manner. In either of these cases, using a form can be discouraging and frustrating for your user. Filling out forms isn’t so fun in the first place for one reason or another, making them difficult to use not only a hurdle, it makes using the site nearly impossible for someone with a disability. If you neglect to include tabindex attributes, a user hitting their TAB key will be guided through your form using the order in which the elements appear in the markup, which can sometimes be counterintuitive.

According to the Web Accessibility Initiative (WAI), tabindex is mentioned in the Web Content Accessibility Guidelines 1.0 (WCAG) where some checkpoints are provided to us. Specifically, the Guidelines mention:

Create a logical tab order through links, form controls, and objects. [Priority 3] (Checkpoint 9.4)

The thing to concentrate on here is creating a logical tab order. It is up to you to ensure that the document flows in a logical manner, and a good way to check whether or not any particular document is logical would be to ask a few co-workers or friends to check it out for a minute. Something that seems completely logical and makes sense to you might only appear as such because you were the one who put it together.

Information on Using tabindex

The rules surrounding the use of tabindex are not very strict. Numbers can range from 1 to 32,767 — a range that far exceeds any applicable use of the attribute. The tabindex doesn’t have to start with 1, and you could increment the tabindex by an order of 5 if you chose.

Example: Implementing tabindex

Adding a tabindex to any of your forms can be as easy as appending tabindex="1" to any input, select, textarea, or other applicable element.

<input type="text" name="username" id="username" tabindex="1" />
<input type="password" name="password" id="password" tabindex="2" />

You can see what using a form with tabindex is like by filling out the comment form at the end of this article. There are many elements that support the use of tabindex — for example:

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

Keeping Track of Your tabindex

Some developers have a method for effectively implementing tabindex into forms with many inputs. It is sometimes hard to keep track of large numbers of tabindex attributes so some choose to add tabindex based upon the fieldset the elements are contained within. Taking advantage of the large limit on tabindex numbers, each fieldset represents a “100 level”. To be more clear, in the first fieldset, inputs use tabindexes of “101”, “102”, “103” and so-forth. The following fieldset uses “201”, “202”, etc. This is one of the many ways to make organized use of tabindex.

Using a method such as this can provide you with an easier way to manage tabindex throughout your site. Using one ‘level’ for site navigation and other ‘levels’ for each section for your site will give you flexibility in managing a dynamic site with tabindex.

Is tabindex Too Much Trouble?

Accessibility should always be a priority. Some developers feel that tabindex is more trouble than it’s worth in that when the style is removed from a particular document, the tabindex would then prove to be counter-intuitive because the elements may not be in a logical order without CSS. It’s important to keep that in mind when developing any form — how does it look with the style removed?

There is also the argument that when using tabindex, a user may be misguided through your document without even knowing it. Some people navigate webpages using the keyboard alone. If you were to only implement a tabindex structure within a form in your document, a user would be brought straight to your first tabindex with the first TAB keypress. The user may have expected to end up at the first hyperlink on the page instead. This can be resolved by providing a more extensive tabindex structure on your entire site, taking site navigation, document links, and form elements into consideration.

There is a good article speaking specifically about the negative issues surrounding tabindex. It analyzes various accessibility concerns surrounding tabindex use which should be taken into consideration.

So is it worth it?

Given all the possibilities of misguidance — do you think it’s worth it to include a tabindex within your document? Do you feel it is better to let the browser guide your users through the document using the structure of the markup? Do you think adding a tabindex to forms alone is sufficient (assuming a user will only use it after the form has been entered)?

Personally, reading through that article opened my eyes to a few things I would like to take into consideration in the revision of this site to make more effective use of tabindex.