HTML Guides for aria-errormessage

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

<labelaria-errormessage="email-error">

Email

<inputtype="email"name="email">

</label>

<spanid="email-error">Enter a valid email address.</span>

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

<label>

Email

<inputtype="email"name="email"aria-invalid="true"aria-errormessage="email-error">

</label>

<spanid="email-error">Enter a valid email address.</span>