One of the biggest causes of tabbing issues arise from the incorrect use of tabindex. Sometimes a developer may try to control the tab flow of a page by using tabindex, this should be avoided. By default the tab flow of a page should go in the order that the elements occur, so you shouldn’t need to use tabindex. If you’ve coded everything correctly the tab order should work how it is suppose to. With that said there are two special cases where you might find it helpful to use tabindex.
In some cases you may need to make elements that are not typically tabbable tabbable, this can be accomplished by using tabindex=”0″. A value of zero will make an element tab in its natural position in the tabbing order. For example:
<a href=”link1.html”>Link Number 1</a>
<span tabindex=”0″>This is in between the links</span>
<a href=”link2.html”>Link Number 2</a>
In the above example the first tab would select Link Number 1, the second would select the span, and the third would select Link Number 2. Keep in mind, that although you can make any element tabbable, you should only do so when there is a legitimate reason to enable it.
The point to remember is that if an element is usable t0 a visual user with a mouse, than it should also be accessible via keyboard only interactions. Keep in mind, that even though this is possible, it is better to use elements that are naturally tabbable over adding a tabindex to an element that isn’t.
The second case where tabindex is ok is when its value is set to tabindex=”-1″. A tabindex of -1 means that the element can be given focus programmatically, but won’t be tabbable in the natural tab order of the page. This is useful when you want to give focus to an message or notice. One thing to keep in mind when using a -1 tabindex is that the element must also have a unique id associated with it. Here is an example of how you would set up a notice and give it focus:
<div id=”error” tabindex=”-1″>
<h2>This is an error!</h2>
<p>This is an error message</p>
tabindex=”1″ Just Don’t Do It
Other than these two cases tabindex should not be used, the general rule is that the value should not be greater than 0. Tabindex can be a powerful feature to make your web site more accessible, but when used incorrectly or excessively it will create more problems than it solves.