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

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

aria-describedby points assistive technology at one or more elements that describe a control, referenced by their id. The description belongs on the control being described, not on its label. When a <label> wraps the control, the label already supplies the accessible name, so adding a description there leaves it unclear what the text is meant to describe.

That ambiguity is why the spec rejects the attribute on a <label> that is an ancestor of a labelable element. 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-describedby onto the form control so the description is announced for the element it actually refers to.

Examples

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

<label aria-describedby="password-hint">
  Password
  <input type="password" name="password">
</label>
<span id="password-hint">Use at least 8 characters.</span>

Fixed: move it to the input

<label>
  Password
  <input type="password" name="password" aria-describedby="password-hint">
</label>
<span id="password-hint">Use at least 8 characters.</span>

Learn more:

MDN Reference

aria-describedby - MDN Web Docs

→

MDN Reference

The label element - MDN Web Docs

→

WHATWG Spec

WHATWG HTML Standard - Forms

→