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

A `<label>` that points at a form control with its `for` attribute can't carry `aria-controls`, because that relationship belongs on the control itself.

`aria-controls` takes the `id` of the element whose content or visibility the current element changes, such as the panel a tab shows or the slide a carousel control brings into view. Screen readers report that relationship on the focused element, and some let users jump from there to the controlled region.

Once a `<label>` is associated with a labelable element (`<input>`, `<select>`, `<textarea>`, `<button>` and a few others), it has no role of its own. Its text becomes the control's accessible name, and a click on it goes to the control. Keyboard and screen reader users interact with the control, not with the label, so `aria-controls` on the label sits on an element they never reach.

The error often comes from CSS-only tabs or sliders built from radio buttons, where each `<label>` is styled as the visible trigger and the `<input>` is hidden. Put `aria-controls` on each `<input>` and leave the `<label>` with just its `for` attribute. If you hide the radio buttons, use a visually hidden technique rather than `display: none`, so they stay focusable and screen readers can still announce them.

## Invalid example

```html
<input type="radio" name="slides" id="slide-1" checked>
<label for="slide-1" aria-controls="panel-1">First slide</label>
<input type="radio" name="slides" id="slide-2">
<label for="slide-2" aria-controls="panel-2">Second slide</label>

<div id="panel-1">First slide content</div>
<div id="panel-2">Second slide content</div>
```

## Valid example

```html
<input type="radio" name="slides" id="slide-1" aria-controls="panel-1" checked>
<label for="slide-1">First slide</label>
<input type="radio" name="slides" id="slide-2" aria-controls="panel-2">
<label for="slide-2">Second slide</label>

<div id="panel-1">First slide content</div>
<div id="panel-2">Second slide content</div>
```