tabindex

Ensures tabindex attribute values are not greater than zero

Who might be affected

Screen Reader

Motor/Mobility

Keyboard

Cognitive

Description

The tabindex attribute has two effects on HTML elements. The first enables the element's option to receive focus, and the second is to set the element's position on the page's focus sequence.

Any value greater than zero sets the focus position in ascending order, i.e., tabindex="1" will be the first in the focus sequence, tabindex="2" second, and so on. However, setting an element's position in the focus sequence in a way that contradicts its position in the natural flow of the page may cause certain users to have difficulty navigating the page or to conclude that the focus skips a specific element and is, therefore, inaccessible. These issues will particularly arise on responsive pages where the page layout changes between breakpoints, so a focus sequence that makes sense in one breakpoint layout may not necessarily work in another breakpoint's layout.

Quick Fixes

Ensure that the value of all the tabindex attributes is not greater than zero.
Allowed values:

"0": Enables the focusability of the element but will not change its position in the page's default focus sequence.
"-1": Will exclude the element from the focus sequence (i.e., the element won't be reachable by tabbing) but will enable the option to set focus on the element programmatically using JavaScript or internal page links.

How Users Are Affected

An unexpected or illogical focus order may make the user assume that certain elements are skipped or not reachable by some assistive technologies. In addition, it may affect the user's understanding of the interface and how to use it.

WCAG Success criteria

This issue might cause elements to fail one or more of the following Success criteria:
N/A (Best Practice)