# The “aria-label” attribute must not be used on any “label” element that is associated with a labelable element.

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-aria-label-attribute-must-not-be-used-on-any-label-element-that-is-associated-with-a-labelable-element
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `aria-label` attribute is not allowed on a `label` element that is associated with a form control through the `for` attribute.

A `<label>` element already provides an accessible name for the form control it's associated with. Adding `aria-label` to the `<label>` itself creates a conflict: the `aria-label` would attempt to override the label's own accessible name, but the label's visible text is what gets passed to the associated form control. This redundancy is not only unnecessary but explicitly prohibited by the HTML specification.

The `<label>` element's purpose is to *be* the accessible label for another element. If you want the form control to have an accessible name, simply put that text inside the `<label>` element as visible content. If you need to provide a different accessible name directly to the form control, place the `aria-label` on the input element instead.

## Incorrect Example

```html
<label for="input_email" id="label_input_email" aria-label="Email">
  Email
</label>
<input type="email" id="input_email">
```

## Correct Example

The simplest fix is to remove the `aria-label` from the `<label>`, since the label's text content already serves as the accessible name for the input:

```html
<label for="input_email" id="label_input_email">
  Email
</label>
<input type="email" id="input_email">
```

If you need the accessible name to differ from the visible label text, place `aria-label` on the input instead:

```html
<label for="input_email" id="label_input_email">
  Email
</label>
<input type="email" id="input_email" aria-label="Your email address">
```