Ensure tabindex Attribute Values Are Not Greater Than 0

A tabindex attribute must never have a value greater than 0 to prevent an unexpected tab order.

Why It Matters

Using tabindex with a value greater than 0 can create accessibility issues. An unexpected tab order can make the page less intuitive and give the appearance of skipping certain elements entirely.

Fixing the Issue

There are two solutions you can use to avoid using tabindex with a value greater than 0. 

The first is to change the tabindex to 0, while the second is to remove the tabindex entirely and modify the structure of the page so that a user tabbing through elements reaches them in the necessary order.

There is also the option of changing the tabindex to tabindex=”-1″ and adding Javascript. This removes the element from the tab order until Javascript changes the “-1” to a “0”.

Only links and form elements can receive the tab focus under normal conditions. It’s best not to add other items (such as <p>, <th>, <span>, etc.) to the tab flow. However, in some circumstances, 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

Whichever option you choose, be sure that the resulting tab order follows a logical pattern. Remember that tab order is determined by order of elements in the DOM, as opposed to how they are positioned visually. 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;