0Pricing
HTML Academy · Lesson

aria-expanded aria-controls for Toggles

Build accessible disclosure and accordion widgets with ARIA.

Toggle Pattern Overview

Toggle controls (accordions, dropdowns, menus) need ARIA to communicate their open/closed state:

  • aria-expanded — indicates open/closed state of a control
  • aria-controls — links the control to the element it controls

aria-expanded

aria-expanded communicates whether a controlled element is expanded or collapsed:

<button aria-expanded="false" aria-controls="menu">
  Menu
</button>
<ul id="menu" hidden>
  <li><a href="/">Home</a></li>
</ul>
<script>
btn.addEventListener('click', () => {
  const expanded = btn.getAttribute('aria-expanded') === 'true';
  btn.setAttribute('aria-expanded', !expanded);
  menu.hidden = expanded;
});
</script>

All lessons in this course

  1. aria-expanded aria-controls for Toggles
  2. aria-selected and Tab Patterns
  3. Live Regions aria-live aria-atomic aria-relevant
  4. Testing with Screen Readers
← Back to HTML Academy