Elements should not have tabindex greater than zero

Using tabindex with a value greater than 0 can create as many problems as it solves. It creates an unexpected tab order, which makes the page less intuitive and can give the appearance of skipping certain elements entirely.

Here are some of the problems that tabindex (with a value of 1 or greater) causes:

Fixing the problem

There are two main ways to avoid using tabindex with a value greater than 0. The first method is to change the tabindex to 0. Note that this may change the order in which the user tabs through the elements. The second method is to remove the tabindex entirely and modify the structure of the page so that a user tabbing through elements reach them in the order initially desired.

A third method is to change the tabindex to tabindex="-1" and add Javascript. This removes the element from the tab order until you use Javascript changes the "-1" to a "0".

Adding Items to the Tab Order Using tabindex="0" or tabindex="-1" + JavaScript

Only links and form elements can receive the tab focus under normal conditions. Most of the time it is best to not add other items (such as <p>, <th>, <span>, etc.) to the tab flow, but under some exceptional circumstances — such as some kinds of complex interactive JavaScript widgets — it can make sense to add items to the tab flow that would not normally receive the tab focus. There are two ways to accomplish this:

  1. tabindex="0"
  2. tabindex="-1" + JavaScript
Methods for allowing items to receive tab focus
Method Effect
tabindex="0" Puts the item in the normal tab flow.
tabindex="-1" + JavaScript Keeps the item out of the normal tab flow until a JavaScript method allows tab focus and changes the value (i.e. by changing the tabindex value to 0 or a positive number)

Regardless of the fix you choose, be sure that the resulting tab order follows a pattern that is logical from the user’s perspective. Remember that tab order is determined by order of elements in the DOM, as opposed to how they visual positioning. Remember that Default Tab Order = Source Code Order = The Order With Styles Turned Off.

Caution: The following CSS styles can change the order in which elements are visually positioned and can thus cause a confusing tab order:

  • position: absolute;
  • position: relative;
  • float: left;
  • float: right;

Sitefig uses axe-core 4.2 for accessibility checking.
axe-core is the leading open source digital accessibility toolkit.