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

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

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

Valid Example

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

Learn more:

MDN Reference

HTML label element

→

MDN Reference

ARIA roles

→

WHATWG Spec

HTML Forms

→