useAriaPropsForRole (HTML)

Summary

Rule available since: v2.4.0
Diagnostic Category: lint/a11y/useAriaPropsForRole
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-has-required-aria-props

How to configure

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

Description

Enforce that elements with ARIA roles must have all required ARIA attributes for that role.

Remember that this rule only supports static values for the role attribute. Dynamic role values are not checked.

Examples

Invalid

1
<span role="checkbox"></span>

code-block.html:1:7 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The element with the checkbox ARIA role does not have the required ARIA attributes.
  
  > 1 │ <span role="checkbox"></span>
      │       ^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Missing ARIA prop(s):
  
  - aria-checked

1
<span role="heading"></span>

code-block.html:1:7 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The element with the heading ARIA role does not have the required ARIA attributes.
  
  > 1 │ <span role="heading"></span>
      │       ^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Missing ARIA prop(s):
  
  - aria-level

Valid

1
<span role="checkbox" aria-checked="true"></span>

1
<span role="heading" aria-level="1"></span>

Accessibility guidelines

WCAG 4.1.2