Skip to content
Use tabindex Sparingly ?>

Use tabindex Sparingly

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.

Using tabindex=”0″

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.

A time when this might be helpful would be if you had javascript functionality associated with the clicking of an images. By adding a tabindex a keyboard only user can interact with the image even though it isn’t typically accessible.

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.

Using tabindex=”-1″

a div with tabindex='-1'
This is what a div with a tabindex=”-1″ looks like when it is given focus.

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>
</div>

jQuery:
$(“#error”).focus();

In the above example we have the div with a tabindex=”-1″ and a unique id, when you call the focus() function in your javascript with jQuery the focus will jump to the div and highlight it. This is helpful because it will help low-sighted or blind user notice that something has changed.

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.

Leave a Reply

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