HighFile-scopeJavaScript / TypeScript Plug & play

Use appropriate tabIndex values

Ensure tabIndex values are either 0 or -1. Positive tabIndex values disrupt the natural tab order and can create accessibility issues.

Add to Mesrai Open workspace

Why this matters

Using positive tabIndex values disrupts the natural tab order, confusing users who rely on keyboard navigation or assistive technologies. Stick to tabIndex values of 0 or -1 for predictable and accessible navigation.

Bad vs. good

Side-by-side examples engineers can pattern-match during review.

Avoid

function MyDiv() {
    return (
        <div>
            <span tabIndex="5">foo</span> // Noncompliant
            <span tabIndex="3">bar</span> // Noncompliant
            <span tabIndex="1">baz</span> // Noncompliant
            <span tabIndex="2">qux</span> // Noncompliant
        </div>
    );
}

Prefer

function MyDiv() {
    return (
        <div>
            <span tabIndex="0">foo</span>
            <span tabIndex="-1">bar</span>
            <span tabIndex={0}>baz</span>
            <span>qux</span>
        </div>
    );
}

More snippets

Bad

function MyDiv() {
    return (
        <div>
            <span tabIndex="5">foo</span> // Noncompliant
            <span tabIndex="3">bar</span> // Noncompliant
            <span tabIndex="1">baz</span> // Noncompliant
            <span tabIndex="2">qux</span> // Noncompliant
        </div>
    );
}

Good

function MyDiv() {
    return (
        <div>
            <span tabIndex="0">foo</span>
            <span tabIndex="-1">bar</span>
            <span tabIndex={0}>baz</span>
            <span>qux</span>
        </div>
    );
}

Related rules

From the same buckets as this rule.

High
Avoid using anchor tags as buttons
Detect cases where <a> elements are used as buttons. Anchor tags should be used for navigation, while actions should be assigned to <button> elements to maintain accessibility and expected behavior.
accessibility-a11yui-robustness
High
Ensure heading elements have meaningful content
Verify that heading elements contain meaningful content. Headings are used for structure and navigation, so empty or generic headings negatively impact accessibility and usability.
accessibility-a11y
High
Interactive DOM elements should not have non-interactive ARIA roles
Ensure that interactive DOM elements have appropriate ARIA roles. Incorrect roles can mislead assistive technologies, affecting accessibility.
accessibility-a11y

Bad vs. good

Side-by-side examples engineers can pattern-match during review.

Avoid

function MyDiv() {
    return (
        <div>
            <span tabIndex="5">foo</span> // Noncompliant
            <span tabIndex="3">bar</span> // Noncompliant
            <span tabIndex="1">baz</span> // Noncompliant
            <span tabIndex="2">qux</span> // Noncompliant
        </div>
    );
}

Prefer

function MyDiv() {
    return (
        <div>
            <span tabIndex="0">foo</span>
            <span tabIndex="-1">bar</span>
            <span tabIndex={0}>baz</span>
            <span>qux</span>
        </div>
    );
}

More snippets

Bad

function MyDiv() {
    return (
        <div>
            <span tabIndex="5">foo</span> // Noncompliant
            <span tabIndex="3">bar</span> // Noncompliant
            <span tabIndex="1">baz</span> // Noncompliant
            <span tabIndex="2">qux</span> // Noncompliant
        </div>
    );
}

Good

function MyDiv() {
    return (
        <div>
            <span tabIndex="0">foo</span>
            <span tabIndex="-1">bar</span>
            <span tabIndex={0}>baz</span>
            <span>qux</span>
        </div>
    );
}

Related rules

From the same buckets as this rule.

High

Avoid using anchor tags as buttons

Detect cases where <a> elements are used as buttons. Anchor tags should be used for navigation, while actions should be assigned to <button> elements to maintain accessibility and expected behavior.

accessibility-a11yui-robustness

High

Ensure heading elements have meaningful content

Verify that heading elements contain meaningful content. Headings are used for structure and navigation, so empty or generic headings negatively impact accessibility and usability.

accessibility-a11y

High

Interactive DOM elements should not have non-interactive ARIA roles

Ensure that interactive DOM elements have appropriate ARIA roles. Incorrect roles can mislead assistive technologies, affecting accessibility.

accessibility-a11y