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

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-aria-errormessage-attribute-must-not-be-used-on-any-label-element-that-is-an-ancestor-of-a-labelable-element
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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

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

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