# The “role” 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-role-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 `role` attribute is not allowed on a `label` element when that `label` is associated with a form control (a labelable element) through the `for` attribute or by nesting.

When a `label` is associated with a form control, the browser already understands its purpose — it's a label. Adding a `role` attribute overrides this native semantics, which is redundant at best and confusing for assistive technologies at worst.

A `label` becomes "associated" with a labelable element in two ways: explicitly via the `for` attribute pointing to the control's `id`, or implicitly by wrapping the control inside the `label`. Labelable elements include `input` (except `type="hidden"`), `select`, `textarea`, `button`, `meter`, `output`, and `progress`.

If the `label` is associated, simply remove the `role` attribute. The native semantics are already correct and sufficient.

If you truly need a custom role for some reason and the `label` is not functionally labeling a control, you can disassociate it by removing the `for` attribute or unnesting the control — but this is rarely the right approach.

## Invalid Example

```html
<label for="email" role="presentation">Email</label>
<input type="email" id="email">
```

## Valid Example

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