Helping Your User With tabindex

Posted: October 09, 2006 Comments(7)

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.

Get my newsletter

Receive periodic updates right in the mail!

  • This field is for validation purposes and should be left unchanged.

Comments

  1. ‘This can be resolved by providing a more extensive tabindex structure on your entire site.’

    I rarely use tabindex, as with large documents it can become confusing to add them. If you add them to a form, they take priority, but then you must add them to the other links to maintain the the order. Can become a complete nightmare.

    For important, most-used form inputs (such as a search box) I add an accesskey (4), so keyboard users can go straight there, but doesn’t interfere with the logical tabindex order.

    You can also give numerous elements the same tabindex, and then they’re tabbed through in source order.

    Finally, tabindex -1 was discussed with the HTML 4.01 spec, but removed before recommendation. This means the user-agent should skip this link/input, which I think is useful, but beware it isn’t valid.

  2. @trovster: I can honestly say (and you can see by the markup of this site) that it’s rare for me to use tabindex as well. Just thinking about trying to manage them seems like it would be quite a daunting task.

    Great point about giving a number of elements the same tabindex — I failed to mention that earlier. The same goes for a tabindex of -1. Thanks for adding both.

  3. If tabindex is to be used only one place in a site, it would have to be forms – I couldn’t agree with you any more.

    I personally feel creating custom tabindexes is highly important. We did that on the Current TV website – especially on the forms. You can definitely frustrate users by executing it incorrectly, but if well done, it highly increases the usability of a site.

  4. Nice article Jon! I’ve largely ignored tabindex for a while, probably because I tend to put my HTML in a logical order from the start. Problem is that when I use source ordering (content before navigation i code, but not visually) I really should use tabindex, thanks for reminding me!

  5. Thanks for bringing up this accessibility point. I could really see this being really helpful to somebody having a hard time using a mouse.

    P.S. Had a lot of fun tabbing through your website đŸ™‚

  6. […] Another frustration that often surfaces is poor use of tabindex. Browsers are quite good at figuring out a logical order for tabindex if the developer hasn’t implemented one, but they’re not perfect. There are many (high profile) websites with terrible implementations of tabindex, dragging readers here & there in a very disorienting manner. Issues with form jumping can be easily avoided with a quick implementation of a logical tabindex. […]

Leave a Reply

Your email address will not be published. Required fields are marked *