1. Technology

Tabindex: Making Your Pages Accessible

The Order that Tabs will Negotiate Your Web Site: Tabindex


Tabindex is an attribute that is so easy to use and yet hardly anyone uses it. This means that in order to get around most sites without using the mouse, you must tab and tab and tab and tab and tab to get to the valid links on the page. There is one page I use for About every week that I have to tab 24 times to get to the only button on the page that I ever click. (There are 23 other "navigation" links ahead of it.) This can be very frustrating.

Remember: Not Everyone Uses a Mouse

People who are interested in efficiency and being more effective while working on the computer have come to realize that the mouse is a time suck. Every time you move your hands away from the keyboard, you are slowed down, because in order to get back to typing, you have to move your hands back again. Tools like ActiveWords (Windows) and QuickSilver (Macintosh) can help, but as a web developer, you can use the tabindex attribute to make things even better.

What is Tabindex

According to W3C tabindex is:

"the position of the current element in the tabbing order for the current document"

What this means is that when a customer comes to your page, if they hit tab to navigate through the site, the first link they will be taken to is the link listed as tabindex="1".

This is followed by tabindex="2" and tabindex="3"...

Then elements that do not have a tabindex set (or don't support the tabindex attribute) come after that, in the order they appear on the page.

What Elements Support Tabindex

  • a <a href="" tabindex="1"></a>
  • area <area href="" tabindex="1" type="rect" coords="" />
  • button <button tabindex="1" name="" value="" id="" />
  • input <input tabindex="1" name="" value="" id="" />
  • object <object tabindex="1" name="" value="" id="" />
  • select <select tabindex="1" name="" value="" id="" ></select>
  • textarea <textarea tabindex="1" cols="30" rows="4"></textarea>

Using Tabindex

It is simple to use tabindex. Simply go to your web page and look at it as if you were a customer. When a customer comes to the page, what is she likely to want to click on first? Or what do you want her to click on first? Make that tabindex="1". Move through the page in that fashion.

  • Don't include navigation in your tabindex.
    Most of the time, navigation is what people click on when they don't know where else to go. If your page has no links or form elements, then you can simply leave tabindex off altogether.
  • Do try to think like a user.
    Using tabindex can be annoying if you use it to drive people to things that they wouldn't be likely to click on next. For example, on a multiple page article, making the "buy now" link tabindex="1" will be more annoying than if you recognize that most people will want to read all your features before purchasing.
  • Do include your important links in the tabindex.
    The above tip was not to say that you shouldn't have your buy now link in the tabindex. After all, it is more important than the navigation links.

Please! Use Tabindex!

It's a simple way to improve your pages. They'll be accessible and more usable. And I for one, will thank you for it.

And then read some other articles on web usability to improve your site even more.

©2014 About.com. All rights reserved.