noAriaHiddenOnFocusable (HTML)

Summary

Rule available since: v2.5.0
Diagnostic Category: lint/a11y/noAriaHiddenOnFocusable
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/no-aria-hidden-on-focusable
- Same as @html-eslint/no-aria-hidden-on-focusable

How to configure

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

Description

Enforce that aria-hidden=“true” is not set on focusable elements.

aria-hidden="true" can be used to hide purely decorative content from screen reader users. A focusable element with aria-hidden="true" can be reached by keyboard. This can lead to confusion or unexpected behavior for screen reader users.

Examples

Invalid

1
<div aria-hidden="true" tabindex="0"></div>

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

  ✖ Incorrect use of aria-hidden="true" detected.
  
  > 1 │ <div aria-hidden="true" tabindex="0"></div>
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ aria-hidden should not be set to true on focusable elements because this can lead to confusing behavior for screen reader users.
  
  ℹ Unsafe fix: Remove the aria-hidden attribute from the element.
  
    1 │ <div·aria-hidden="true"·tabindex="0"></div>
      │      -------------------

1
<a href="/" aria-hidden="true">link</a>

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

  ✖ Incorrect use of aria-hidden="true" detected.
  
  > 1 │ <a href="/" aria-hidden="true">link</a>
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ aria-hidden should not be set to true on focusable elements because this can lead to confusing behavior for screen reader users.
  
  ℹ Unsafe fix: Remove the aria-hidden attribute from the element.
  
    1 │ <a·href="/"·aria-hidden="true">link</a>
      │             ------------------

Valid

1
<div aria-hidden="true"></div>

1
<button aria-hidden="true" tabindex="-1"></button>