# The “aria-label” attribute must not be used on any “label” element that is an ancestor of 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-an-ancestor-of-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 when that `<label>` contains a labelable element (such as `<input>`, `<select>`, `<textarea>`, or `<button>`).

The `<label>` element already provides an accessible name for its associated form control through its text content. When a `<label>` wraps a labelable element, adding `aria-label` to the `<label>` creates a conflict: the `<label>` has one accessible name (from `aria-label`) while the form control inside it derives its accessible name from the `<label>`'s text content. Assistive technologies may handle this inconsistency unpredictably.

The HTML spec restricts `aria-label` on `<label>` elements that are ancestors of labelable elements. A "labelable element" is any element that can be associated with a `<label>`, including `<input>` (except `type="hidden"`), `<select>`, `<textarea>`, `<button>`, `<meter>`, `<output>`, and `<progress>`.

If the `<label>` needs visible text, just use the text content of the `<label>` directly. If you need to provide an accessible name that differs from the visible text, place `aria-label` on the form control itself instead of on the `<label>`.

## Examples

### Invalid: `aria-label` on a `label` that wraps an input

```html
<label aria-label="Enter your email address">
  Email
  <input type="email" name="email">
</label>
```

### Fixed: move `aria-label` to the input

If the visible label text is sufficient, remove `aria-label` entirely:

```html
<label>
  Email
  <input type="email" name="email">
</label>
```

If you need a more descriptive accessible name for the input, place `aria-label` on the input:

```html
<label>
  Email
  <input type="email" name="email" aria-label="Enter your email address">
</label>
```