aria-controls

ID reference list

Identifies the element(s) whose content or presence the current element controls, such as the panel a tab or toggle button opens. It expresses the relationship programmatically but has uneven screen-reader support, so don't rely on it as the only cue. It's commonly paired with aria-expanded in disclosure and tab patterns.

aria-controls="…"

Value

A space-separated list of element ids.

Used on

Any HTML element — aria-controls is a global property.

Associated roles

Every ARIA role. As a global property, aria-controls is supported on all roles.

Example

aria-controls="…"

<button aria-controls="panel" aria-expanded="true">
  Toggle
</button>
<div id="panel">…</div>

References

WAI-ARIA 1.2 specification
MDN Web Docs