noPositiveTabindex (HTML)

Summary

Rule available since: v2.4.0
Diagnostic Category: lint/a11y/noPositiveTabindex
This rule is recommended, meaning it is enabled by default.
This rule has an unsafe fix.
The default severity of this rule is error.
Sources:
- Inspired from jsx-a11y/tabindex-no-positive
- Same as @html-eslint/no-positive-tabindex

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "a11y": {
5
        "noPositiveTabindex": "error"
6
      }
7
    }
8
  }
9
}

Description

Disallow positive values for the tabindex attribute.

Keyboard focus determines which element receives keyboard input. A positive tabindex overrides the page’s natural focus order and can make keyboard navigation unpredictable. Use 0 to include an element in the natural order, or -1 to exclude it from keyboard navigation while keeping it focusable through code.

Accessibility guidelines

WCAG 2.4.3

Examples

Invalid

1
<div tabindex="1"></div>

code-block.html:1:15 lint/a11y/noPositiveTabindex  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Avoid positive values for the tabindex attribute.
  
  > 1 │ <div tabindex="1"></div>
      │               ^^^
    2 │ 
  
  ℹ Elements with a positive tabindex override natural page content order. This causes elements without a positive tab index to come last when navigating using a keyboard.
  
  ℹ Use only 0 and -1 as tabindex values. Avoid using tabindex values greater than 0 and CSS properties that can change the order of focusable HTML elements.
  
  ℹ Unsafe fix: Remove the tabindex attribute.
  
    1 │ <div·tabindex="1"></div>
      │      ------------

1
<div tabindex="5"></div>

code-block.html:1:15 lint/a11y/noPositiveTabindex  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Avoid positive values for the tabindex attribute.
  
  > 1 │ <div tabindex="5"></div>
      │               ^^^
    2 │ 
  
  ℹ Elements with a positive tabindex override natural page content order. This causes elements without a positive tab index to come last when navigating using a keyboard.
  
  ℹ Use only 0 and -1 as tabindex values. Avoid using tabindex values greater than 0 and CSS properties that can change the order of focusable HTML elements.
  
  ℹ Unsafe fix: Remove the tabindex attribute.
  
    1 │ <div·tabindex="5"></div>
      │      ------------

Valid

1
<div tabindex="0"></div>

1
<div tabindex="-1"></div>