I am a minimalist. I believe that simple solutions are better. So, when it comes to tabindex, I rarely invite “him” to the accessibility party. Why? Because if you will just write the source code in the same order you need the items for the visual presentation, then tabindex is not necessary. But there are two decent reasons for using tabindex.

  • tabindex = “0” to add something that is not a link or a form field to the tab order.
  • tabindex = “-1” to keep something out of the default tab order, but make it focusable using the javascript focus(). Remember to use progressive enhancement.

When you specify the tab index on visible elements, remember the following:

  • Elements with tabIndex=0 are ordered based on the source
  • Any element with tabIndex>0 appears before all elements with tabIndex=0
  • Any elements with the same tabIndex are ordered based on the source order

These features work in Internet Explorer, Firefox, Opera and Chrome, but they are undocumented. So, always play it safe. Build the core functionality in with pure HTML. Add CSS to enhance the presentation. Add javascript to enhance the experience. Have your source code order match the visual presentation order (after CSS is applied). Remember that all form fields and links are automatically in the tab order (so tabindex is redundant on these elements if you just have good source code order). When in doubt, leave tabindex out!