# The “aria-hidden” 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-hidden-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/)

A `<label>` element that wraps a form control, such as an `<input>` or a `<select>`, can't have an `aria-hidden` attribute, whatever its value.

`aria-hidden="true"` removes an element and everything inside it from the accessibility tree. When a `<label>` contains a labelable element (`button`, `meter`, `output`, `progress`, `select`, `textarea`, or an `input` of any type except `hidden`), hiding the label hides the control too. Keyboard users can still tab to the field, but a screen reader has nothing to announce when they get there, not even the label text that should give the control its name.

The validator reports the attribute on these labels with any value, including `aria-hidden="false"`, so remove it instead of changing it. If the label also points to the control with a `for` attribute, a second error says the label is associated with a labelable element.

Remove `aria-hidden` from the `<label>`. When only part of the label is decorative, such as an icon or the asterisk that marks a required field, put `aria-hidden="true"` on a `<span>` around that part. A visually hidden CSS class keeps label text off the screen so that only screen readers read it, and `aria-hidden` on the same label cancels that. If the whole field has to stay hidden from everyone, as with a spam trap field, put `aria-hidden="true"` on an element that wraps the label and add `tabindex="-1"` to the control so keyboard users can't reach it.

## Invalid example

```html
<label aria-hidden="true">
  Email <span class="required">*</span>
  <input type="email" name="email" required>
</label>
```

## Valid example

```html
<label>
  Email <span class="required" aria-hidden="true">*</span>
  <input type="email" name="email" required>
</label>
```