useValidAriaProps (HTML)
Summary
Section titled “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
- Inspired from
How to configure
Section titled “How to configure”{ "linter": { "rules": { "a11y": { "useValidAriaProps": "error" } } }}Description
Section titled “Description”Ensures that ARIA properties aria-* are all valid.
Examples
Section titled “Examples”Invalid
Section titled “Invalid”<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=""·/>
│ ---------------
<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>
│ -------------------
<input type="text" aria-label="Enter your name" /><div aria-hidden="true"></div>Accessibility guidelines
Section titled “Accessibility guidelines”Related links
Section titled “Related links”Sponsored by
Copyright (c) 2023-present Biome Developers and Contributors.