useAriaPropsSupportedByRole (HTML)

Summary

Rule available since: v2.5.0
Diagnostic Category: lint/a11y/useAriaPropsSupportedByRole
This rule is recommended, meaning it is enabled by default.
This rule doesn’t have a fix.
The default severity of this rule is error.
Sources:
- Inspired from jsx-a11y/role-supports-aria-props

How to configure

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

Description

Enforce that ARIA properties are valid for the roles that are supported by the element.

Invalid ARIA properties can make it difficult for users of assistive technologies to understand the purpose of the element.

Examples

Invalid

1
<a href="#" aria-checked="true"></a>

code-block.html:1:1 lint/a11y/useAriaPropsSupportedByRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The ARIA attribute 'aria-checked' is not supported by this element.
  
  > 1 │ <a href="#" aria-checked="true"></a>
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Assistive technologies may ignore an ARIA attribute that the role of the element does not support, or report incorrect information to the user.
  
  ℹ Remove the attribute, or use a role that supports it.

1
<img alt="foobar" aria-checked="true" />

code-block.html:1:1 lint/a11y/useAriaPropsSupportedByRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The ARIA attribute 'aria-checked' is not supported by this element.
  
  > 1 │ <img alt="foobar" aria-checked="true" />
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Assistive technologies may ignore an ARIA attribute that the role of the element does not support, or report incorrect information to the user.
  
  ℹ Remove the attribute, or use a role that supports it.

Valid

1
<a href="#" aria-expanded="true"></a>
2
<img alt="foobar" aria-hidden="true" />
3
<div role="heading" aria-level="1"></div>