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

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

The <label> element already provides an accessible name for its associated form control through its text content. When a <label> wraps a labelable element, adding aria-label to the <label> creates a conflict: the <label> has one accessible name (from aria-label) while the form control inside it derives its accessible name from the <label>'s text content. Assistive technologies may handle this inconsistency unpredictably.

The HTML spec restricts aria-label on <label> elements that are ancestors of labelable elements. A "labelable element" is any element that can be associated with a <label>, including <input> (except type="hidden"), <select>, <textarea>, <button>, <meter>, <output>, and <progress>.

If the <label> needs visible text, just use the text content of the <label> directly. If you need to provide an accessible name that differs from the visible text, place aria-label on the form control itself instead of on the <label>.

Examples

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

<label aria-label="Enter your email address">
  Email
  <input type="email" name="email">
</label>

Fixed: move aria-label to the input

If the visible label text is sufficient, remove aria-label entirely:

<label>
  Email
  <input type="email" name="email">
</label>

If you need a more descriptive accessible name for the input, place aria-label on the input:

<label>
  Email
  <input type="email" name="email" aria-label="Enter your email address">
</label>

Learn more:

MDN Reference

Using aria-label - MDN Web Docs

→

MDN Reference

The label element - MDN Web Docs

→

WHATWG Spec

WHATWG HTML Standard - Forms

→