Elements should not have tabindex greater than zero
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)
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
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
the "-1" to a "0".
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
<span>, etc.) to the tab flow, but under some exceptional
make sense to add items to the tab flow that would not normally receive the tab focus.
There are two ways to accomplish this:
||Puts the item in the normal tab flow.|
focus and changes the value (i.e. by changing the
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: