HTML: aria-controls

The aria-controls attribute identifies the element whose content a button or other control operates.

What you will learn

How to connect a control to a target by id
How aria-controls describes a relationship
Why it is often paired with aria-expanded

Minimal example

<button type="button" aria-controls="menu" aria-expanded="false">
  Menu
</button>
<nav id="menu" hidden>Navigation links</nav>

The value of aria-controls must match the target element’s id. JavaScript should also update aria-expanded and the visible state when the menu opens or closes.

What it does not do

aria-controls does not open, close, or show an element by itself. It only describes the relationship for assistive technology. Use native elements such as details when they already provide the needed behavior.

Common mistakes

Do not point to an id that does not exist or is not unique.
Keep the control’s accessible name clear, and expose the current state with aria-expanded when applicable.
Do not add ARIA without implementing the corresponding interaction for all users.