The “aria-errormessage” attribute must not be used on any “label” element that is an ancestor of a labelable element.

The aria-errormessage attribute is not allowed on a <label> element when that <label> contains a labelable element (such as <input>, <select>, <textarea>, or <button>).

aria-errormessage identifies the element that holds the error text for a control whose value is invalid. It belongs on the control itself, alongside aria-invalid="true", and its value is the id of the element containing the message. A <label> has no validity state, so the attribute has nothing to describe there.

When the <label> wraps a labelable element, the control inside it is the thing that can be valid or invalid. Putting aria-errormessage on the surrounding <label> points assistive technology at an error for an element that cannot have one, which is why the spec rejects it. A "labelable element" is any element a <label> can be associated with: <input> (except type="hidden"), <select>, <textarea>, <button>, <meter>, <output>, and <progress>.

Move aria-errormessage to the form control, and pair it with aria-invalid so the message is announced only while the value is invalid.

Examples

Invalid: aria-errormessage on a label that wraps an input

<label aria-errormessage="email-error">
  Email
  <input type="email" name="email">
</label>
<span id="email-error">Enter a valid email address.</span>

Fixed: move it to the input, with aria-invalid

<label>
  Email
  <input type="email" name="email" aria-invalid="true" aria-errormessage="email-error">
</label>
<span id="email-error">Enter a valid email address.</span>

Learn more:

MDN Reference

aria-errormessage - MDN Web Docs

→

MDN Reference

The label element - MDN Web Docs

→

WHATWG Spec

WHATWG HTML Standard - Forms

→