About This HTML Issue
The aria-errormessage attribute is not allowed on a <label> element that points to a form control through its for attribute.
aria-errormessage takes the id of the element holding the error text for a form control. Assistive technology announces that text when the control is marked invalid with aria-invalid="true". Both attributes describe the control's value, so both go on the control.
A <label> with a for attribute is associated with the labelable element whose id matches, and its text becomes that element's accessible name. The label has no value and no validity state of its own, so an error reference on it has nothing to describe. The control it names still has no error message attached, and a screen reader user who reaches the invalid field hears no error.
Move aria-errormessage from the <label> to the control named in for, and set aria-invalid="true" on the control while its value fails validation. If the <label> wraps the control instead of using for, the validator reports the same mistake with a different message, saying the <label> is an ancestor of a labelable element.
Invalid example
<input type="checkbox" id="terms" name="terms" required>
<label for="terms" aria-errormessage="terms-error">I accept the terms of service</label>
<span id="terms-error">You must accept the terms to continue.</span>
Valid example
<input type="checkbox" id="terms" name="terms" required aria-invalid="true" aria-errormessage="terms-error">
<label for="terms">I accept the terms of service</label>
<span id="terms-error">You must accept the terms to continue.</span>
Find issues like this automatically
Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.