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">

error: "aria-label" cannot be used on this element (aria-label-misuse) at inline:1:22:
> 1 | <input type="hidden" aria-label="foobar">
    |                      ^^^^^^^^^^


1 error found.

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.