Disallow aria-label
misuse (aria-label-misuse
)
aria-label
is used to set the label of an element when no native text is present or non-descriptive.
The attribute can only be used on the following elements:
- Interactive elements
- Labelable elements
- Landmark elements
- Elements with roles inheriting from widget
<area>
<form>
and<fieldset>
<iframe>
<img>
and<figure>
<summary>
<table>
,<td>
and<th>
Additionally, this rule ignores elements which explicitly declare an aria-label
attribute.
See the section on custom components below.
Rule details
Examples of incorrect code for this rule:
<input type="hidden" aria-label="foobar">
Examples of correct code for this rule:
<input type="text" aria-label="foobar">
Custom components
When using custom components and you expect consumers to set aria-label
on your component you need to explicitly declare the aria-label
attribute:
import { defineMetadata } from "html-validate";
export default defineMetadata({
"awesome-component": {
attributes: {
"aria-label": {},
},
},
});
The mere presence of aria-label
declaration ensures this rule will allow aria-label
to be specified.
Version history
- 7.17.0 - Allow usage on custom elements.