How to use Tabindex correctly

The tabindex is extremely important to anyone with sight imparement.
It allows easy and predictable keyboard navigation of all page elements that one would normally interact with using a pointing device.
By default the browser works out the logical order of all the keyboard focusable elements on the page, based on source order. You should only modify this native behaviour when absolutely necessary and adhere to the following rules.


There are three simple rules


1. Never use a positive value for tabindex

Doing so creates an artificial order for keyboard navigation. Subsequently, the source order could be different to the tab order. This is very confusing if you are relying on a screen reader and keyboard to navigate the page.


2. Use tabindex="0" to enable keyboard focusing on elements not natively focusable

e.g. span, div, p. Any element with tabindex="0" will have its tab order dictated by the logical order of the markup and therefore be focusable via the keyboard in a logical, predictable way.


3. Use tabindex="-1" to change focus programatically

Adding tabindex="-1" will remove the element from the normal flow of the document. Therefore it will be unreachable using the keyboard. You can change focus to these items programatically so they become keyboard navigable. An example usage of this is in a multistep form where fieldsets are initially hidden from the user until they reach the relevant stage. When focus is changed to the active panel, a screenreader and therefore keyboard navigation will interpret the contents of the focussed element in source order.


Further reading

webaim.org

BBC Future Media

Harvard University