# The “aria-hidden” attribute must not be used on any “label” element that is associated with 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-associated-with-a-labelable-element
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

An `aria-hidden` attribute on a `<label>` element that is associated with a form control hides the label from assistive technologies while the control still expects an accessible name from it. This creates a broken association where the form field appears unlabeled to screen readers.

The `aria-hidden="true"` attribute removes an element and all its descendants from the accessibility tree. When a `<label>` is linked to an input (either by wrapping it or through the `for` attribute), the browser uses that label to compute the input's accessible name. Setting `aria-hidden="true"` on the label strips away that name, leaving the input without a label for assistive technology users.

The HTML spec explicitly forbids this combination because it guarantees an accessibility failure. A label that exists visually but is hidden from the accessibility tree defeats its own purpose.

To fix this, remove `aria-hidden` from the `<label>`. If the label text should not be visible on screen, use a CSS technique to visually hide it while keeping it accessible. If the label itself is truly decorative and another mechanism provides the accessible name (like `aria-label` on the input), remove the `for`/`id` association so the `<label>` is no longer linked to the control.

## Incorrect example

```html
<label for="email" aria-hidden="true">Email</label>
<input type="email" id="email">
```

## Correct examples

Remove `aria-hidden` from the label:

```html
<label for="email">Email</label>
<input type="email" id="email">
```

If the goal is to visually hide the label while keeping it accessible, use CSS instead:

```html
<label for="email" class="visually-hidden">Email</label>
<input type="email" id="email">

<style>
  .visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
</style>
```

If the label is decorative and the input gets its accessible name from another source, break the association:

```html
<label aria-hidden="true">Email</label>
<input type="email" aria-label="Email">
```