useValidAriaProps (HTML)

Summary

Rule available since: v2.5.0
Diagnostic Category: lint/a11y/useValidAriaProps
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-props

How to configure

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

Description

Disallow unknown aria-* attributes.

ARIA (Accessible Rich Internet Applications) attributes describe an element to assistive technologies. Browsers ignore misspelled or unknown ARIA attributes, so users may not receive the intended name, state, or other accessibility information.

Examples

Invalid

1
<input type="text" aria-labell="" />

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

  ✖ The element contains an invalid ARIA attribute.
  
  > 1 │ <input type="text" aria-labell="" />
      │                    ^^^^^^^^^^^^^^
    2 │ 
  
  ℹ aria-labell is not a valid ARIA attribute.
  
  > 1 │ <input type="text" aria-labell="" />
      │                    ^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Unsafe fix: Remove the invalid aria-* attribute.
                    Check the list of all valid aria-* attributes.
  
    1 │ <input·type="text"·aria-labell=""·/>
      │                    ---------------

1
<div aria-lorem="foobar"></div>

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

  ✖ The element contains an invalid ARIA attribute.
  
  > 1 │ <div aria-lorem="foobar"></div>
      │      ^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ aria-lorem is not a valid ARIA attribute.
  
  > 1 │ <div aria-lorem="foobar"></div>
      │      ^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Unsafe fix: Remove the invalid aria-* attribute.
                    Check the list of all valid aria-* attributes.
  
    1 │ <div·aria-lorem="foobar"></div>
      │      -------------------

Valid

1
<input type="text" aria-label="Enter your name" />
2
<div aria-hidden="true"></div>

Accessibility guidelines

WCAG 4.1.2