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 Navigation plugin.

Screen Reader Only Content

For the Skip Navigation plugin, I had to create a link that would be visible to screen readers, but not to sighted users.

If you were to hide a link by setting display: none in the CSS then screen readers wouldn’t find it.

Instead, we position it absolutely, off the left of the screen.

        position: absolute;
        left: -10000px;

This means it is not technically hidden and the “Skip to main content” link is included in the list of links detected by the screen reader.

NVDA Elements List showing Skip to main content in the list of Links

This is the technique recommended by WebAIM for screen reader only links.

3% of users browse with IE9 and 14% of users have a disability. Why do we only cater for the former?

I wrote this blog post on my old developer blog in June 2014. It got a great response, went straight to the top of Hacker News and gained thousands of social media shares.

It made me realise that a lot of people felt strongly about accessibility, but there weren’t many blogs or tools out there to help. It has eventually led to me learning more about accessibility and launching this site.

Here’s the original post:

Continue reading 3% of users browse with IE9 and 14% of users have a disability. Why do we only cater for the former?