Elements should not have tabindex greater than zero
tabindex attribute must never have a value greater than 0 to prevent an unexpected tab order that can give the appearance of skipping some elements entirely.
The Algorithm, in Simple Terms
Ensures that explicit
tabindex attributes that are greater than 0 are never used
Why this is Important
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:
- Unexpected tab order: From the perspective of the user,
tabindexchanges the default tab order in unexpected ways, possibly causing disorientation.
- Items can appear to be skipped entirely: Items appear in the tab order only once. If a user tabs past the
tabindexitems and continues on through the rest of the web page, at some point the user will arrive at the location of the
tabindexitems, but the tabbing process will skip over these links, because the user already tabbed through them at the beginning of the cycle. The user will likely be frustrated at not being able to access the items, and may not know that (s)he needs to cycle through the entire set of links on the page in order to access those links again.
tabindexitems are tabbed to before any non-
tabindexitems. If you want to change the tab order of the first items AND of a section later in the page, you would need to set the
tabindexvalue for every single item through to the end of the modified section. Taken to a bit of an extreme, if you have 20 links on a page, and if you set the
tabindexof one of those links to
tabindex="100", the user will tab to that link first, even though there are fewer than 100 links on the page. There is no way to modify the tab order of sections later in the page, unless you manually set the tab order of all the links before that section.
How to Fix 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 will reach them in the order initially desired.
A third method is to change the tabindex to
Adding Items to the Tab Order Using
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
||Puts the item in the normal tab flow.|
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 the order of elements in the DOM, as opposed to how they are visually positioned. 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:
- HTML 4