About This HTML Issue
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
<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:
<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:
<label for="input_email" id="label_input_email">
Email
</label>
<input type="email" id="input_email" aria-label="Your email address">Find issues like this automatically
Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.