Skip to main content
HTML Validation

The “aria-controls” attribute must not be used on any “label” element that is associated with a labelable element.

About This HTML Issue

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

<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

<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>

Find issues like this automatically

Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.

Help us improve our guides

Was this guide helpful?
🌍 Trusted by teams worldwide

Validate at scale.
Ship accessible websites, faster.

Automated HTML & accessibility validation for large sites. Check thousands of pages against WCAG guidelines and W3C standards in minutes, not days.

Scheduled Reports
API Access
Open Source Standards
€5 / week

1K Weekly

1,000 monthly checks. Cancel anytime.

Get 1K Weekly →

Join teams across 40+ countries