The tabindex attribute defines the navigation order for focusable elements such as links and form fields in a web page. The tabindex attribute is added to HTML elements, as in the example below:
<label for="name">Name</label> <input type="text" id="name" tabindex="2">
In terms of accessibility, tabindex gets a bad wrap. Whilst official accessibility specifications like WCAG 2.0 don’t say tabindex is bad and shouldn’t ever be used, people working on making web content and online forms accessible all too often fall into a trap of fixating on removing all traces of tabindex.
The fact is, tabindex does have a place in accessible web content and web forms – but must be done correctly.
So what is the right way to use tabindex?
Since tabindex will force the order elements can be selected – if you use tabindex, the order must preserve the meaning of the content.
Now the real trap here is if you have an online form with two fields – tabindex 1 and 2, and a paragraph and link between them – the link will be missed in the tab order. This would be a failure of WCAG 2.0 Criterion 2.4.3.
When should I use tabindex?
There is one way that tabindex can be used that is incredibly useful for screen reader users – and that’s providing critical messages when a page loads, such as an error message when submitting a form.
In this case with use a tabindex value of -1 (minus 1), for example.
<p tabindex="-1">ERROR: This message is VERY important and needs to be read aloud to the screen reader user as soon as the page loads</p>
By using tabindex=”-1″ when the page loads, the assistive technology will jump straight to the error message as soon as the page loads. Pretty neat when it comes to validating forms.
I would carefully consider ever using any other tabindex value – but if you do, TEST TEST TEST by tabing through the web content and making sure elements such as links and form fields can be selected in a logical order.
Further reading
Here’s what WebAim have to say about tabindex -1
Keyboard Accessibility – Tabindex
and another article that briefly covers when it is OK to use tabindex -1