• June 30, 2025

Avoid Tabindex Greater Than 0

Rule ID: tabindex
Ruleset: axe-core 4.10
User Impact: Serious
Guidelines: Deque Best Practice

How to Fix the Problem

To ensure an intuitive and accessible tab order, avoid using tabindex values greater than 0. These values override the natural DOM-based navigation sequence and often introduce confusion. Here’s how to resolve it:

1. Change tabindex to 0

This puts the element into the natural tab sequence, based on its order in the HTML document.

Example:

Use this method if you want a non-interactive element (like <div> or <span>) to be focusable, but want to maintain logical order as per the DOM structure.

2. Remove tabindex and Adjust DOM Structure

When possible, eliminate the tabindex attribute entirely and restructure the HTML so that focusable elements appear in the desired order.

This approach is ideal because it relies on the default browser behavior, which is predictable and easier to maintain.

3. Use tabindex="-1" with JavaScript (Advanced Use Case)

Use this method to keep elements out of the tab sequence unless activated programmatically (e.g., via keyboard interaction).

Example:

General Best Practices:

• Avoid setting tabindex="1" or higher. It forces users to tab through elements in a non-intuitive order.

• Tab order should always align with the source code order (DOM order).

• Avoid relying on visual layout (affected by position: absolute, relative, float) for tab order planning.

• Only use tabindex on elements that should truly receive focus, such as interactive widgets.

Why it Matters

Using tabindex with a value greater than 0 disturbs the natural tabbing behavior and can seriously impair usability for keyboard users, especially those relying on assistive technologies.

Key Issues It Introduces:

• Unexpected Tab Order: Users may find themselves jumping between elements in confusing ways, potentially missing key functionality.

• Elements Appear Skipped: Once visited via an early tabindex, elements are skipped later when the user reaches their natural DOM position.

• Complex Manual Order Requirements: If you use tabindex for one section, you may need to apply it to every interactive element that follows to maintain coherence—an unsustainable practice for larger pages.

Rule Description

The tabindex attribute must not have a value greater than 0. Doing so causes unpredictable and non-linear focus navigation, which can be disorienting for users and negatively affect accessibility.

The Algorithm (in simple terms)

• Check every element with a tabindex attribute.

• If the value is greater than 0 → fail the rule.

• Only allow tabindex="0" (to place element in natural tab sequence) or tabindex="-1" (to remove it from sequence until programmatically activated).