Rule ID: ace-nav-no-positive-tabindex

Flag elements with tabindex values greater than 0, which disrupt natural keyboard navigation order

Blind Deafblind Mobility User Impact

What This Rule Checks

The tabindex attribute controls the order in which users navigate through interactive elements (e.g., buttons, links, form fields) using the keyboard. Ensuring correct use of tabindex is crucial for keyboard accessibility. Incorrect values or misuse of tabindex can confuse users and make navigation difficult.

Who Is Affected

This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Deafblind users, who rely on braille displays and cannot access visual or auditory content; Mobility users, who navigate using keyboards, switches, voice control, or other assistive input devices.

Why This Matters

Positive tabindex values create a custom tab order that overrides the natural document flow. When visual order and tab order diverge, keyboard users become disoriented. Maintaining consistent focus order is critical for keyboard accessibility.

How to Fix

There are three main ways to avoid using tabindex with a value greater than 0:

Change the tabindex to 0: This ensures the element remains focusable but follows the natural tab order. Note that this may change the order in which the user tabs through the elements.

Remove the tabindex attribute entirely: This allows elements to follow the default tabbing order based on their position in the document. Modify the structure of the page so users tab through elements in the desired order.

Use tabindex=”-1″ + JavaScript: This removes the element from the tab order until JavaScript changes the tabindex to 0. This approach is useful for complex JavaScript widgets that only need to be focusable under specific conditions.

Code Examples

Incorrect Markup Solutions:

Code example

<!-- Positive tabindex disrupts natural order -->
<input tabindex="3" placeholder="First field">

<input tabindex="1" placeholder="Second field">

<input tabindex="2" placeholder="Third field">

Copy

Correct Markup Solutions:

Code example

<!-- Natural tab order (no tabindex or tabindex="0") -->
<input placeholder="First field">

<input placeholder="Second field">

<input placeholder="Third field">

<!-- Use tabindex="0" only to add non-interactive elements to tab order -->
<div role="button" tabindex="0">
  Custom button
</div>

Copy

Common Mistakes to Avoid

Using tabindex values greater than 0 to “fix” tab order instead of rearranging the DOM.
Creating inconsistent tab order that differs from the visual layout.
Not testing keyboard navigation after adding tabindex attributes.

Tip: Keyboard navigation is essential for users who cannot use a mouse. Ensure all interactive elements are reachable via the Tab key and operable via Enter or Space. Test focus visibility and focus order on every page.