About This HTML Issue
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">Find issues like this automatically
Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.