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

<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>

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>