The Tabindex Attribute

Changing the Tab Order

The tabindex attribute is used to define the order that you can tab through elements on a page. Most of the time, the default tab order is fine, as it follows the order of elements in the HTML.

For example,

<input type="text" tabindex="1" />

… will take tab focus before

<input type="text" tabindex="3" />

… regardless of where it is positioned in the HTML.

Usually it’s much better to reorganise the HTML than to start adding tabindexes though, as it is just one more thing to maintain.

 

Making it possible to focus <div>, <p> and <span> elements

You can’t usually tab to elements that aren’t links and buttons. You can change this by setting the tabindex value on elements like <div>, <p> and <span>.

Tabindex 0

By setting the tabindex to 0, this means that the element may be tab focused, and you can tab to it in the default order based on where it is in the HTML structure.

Tabindex -1

If you set it to -1, this is a special value that means you can set tab focus using JavaScript, but the user won’t be able to tab to it using their keyboard. I used this in the Skip to Main Content┬áplugin.

Click here to add a comment

Leave a comment: