Skip to content
Biome
Docs Enterprise Playground
Blog

noAriaUnsupportedElements

Diagnostic Category: lint/a11y/noAriaUnsupportedElements

Since: v1.0.0

Sources:

Description

Section titled Description

Enforce that elements that do not support ARIA roles, states, and properties do not have those attributes.

Examples

Section titled Examples

Invalid

Section titled Invalid
<meta charset="UTF-8" role="meta" />
code-block.jsx: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”·/>
      │                       ------------  
<html aria-required="true" />
code-block.jsx: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” />
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    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”·/>
      │       ---------------------

Valid

Section titled Valid
<meta charset="UTF-8" />
<html></html>

How to configure

Section titled How to configure
biome.json
{
  "linter": {
    "rules": {
      "a11y": {
        "noAriaUnsupportedElements": "error"
      }
    }
  }
}
Section titled Related links