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 │ 
  
  ℹ Assistive technologies expect an element with this role to provide these attributes. Without them, screen reader users may not understand the element.
  
  ℹ Add the missing ARIA attribute(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 │ 
  
  ℹ Assistive technologies expect an element with this role to provide these attributes. Without them, screen reader users may not understand the element.
  
  ℹ Add the missing ARIA attribute(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