noAriaUnsupportedElements (HTML)

Summary

Rule available since: v2.5.0
Diagnostic Category: lint/a11y/noAriaUnsupportedElements
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/aria-unsupported-elements

How to configure

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

Description

Disallow ARIA attributes on elements that cannot use them.

ARIA (Accessible Rich Internet Applications) attributes communicate an element’s role and state to assistive technologies. The html, meta, script, and style elements do not support ARIA roles or aria-* attributes, so those attributes provide no usable information.

Examples

Invalid

1
<meta charset="UTF-8" role="meta" />

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

  ✖ Avoid the role attribute and aria-* attributes when using meta, html, script, and style elements.
  
  > 1 │ <meta charset="UTF-8" role="meta" />
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Using role on elements that do not support them can cause issues with screen readers.
  
  ℹ Unsafe fix: Remove the role="meta"  attribute.
  
    1 │ <meta·charset="UTF-8"·role="meta"·/>
      │                       ------------

1
<html aria-required="true"></html>

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

  ✖ Avoid the role attribute and aria-* attributes when using meta, html, script, and style elements.
  
  > 1 │ <html aria-required="true"></html>
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Using aria-* on elements that do not support them can cause issues with screen readers.
  
  ℹ Unsafe fix: Remove the aria-required="true" attribute.
  
    1 │ <html·aria-required="true"></html>
      │       --------------------

Valid

1
<meta charset="UTF-8" />

1
<html></html>