aria-expanded

Description

aria-expanded est utilisé sur un élément de contrôle (bouton, lien…) qui commande l’affichage/masquage d’un autre élément. La valeur true indique que le contenu contrôlé est visible ; false qu’il est masqué.

Syntaxe

<button aria-expanded="false" aria-controls="menu">Menu</button>
<ul id="menu" hidden>…</ul>

Exemples

Accordéon :

<button aria-expanded="true" aria-controls="section-1">
  Section 1
</button>
<div id="section-1">
  <p>Contenu de la section 1.</p>
</div>

Menu de navigation déroulant :

<button aria-expanded="false" aria-haspopup="true" aria-controls="sous-menu">
  Produits
</button>
<ul id="sous-menu" hidden role="menu">
  <li role="menuitem"><a href="/logiciels">Logiciels</a></li>
  <li role="menuitem"><a href="/services">Services</a></li>
</ul>

Mise à jour JavaScript :

btn.addEventListener('click', () => {
  const expanded = btn.getAttribute('aria-expanded') === 'true';
  btn.setAttribute('aria-expanded', String(!expanded));
  panel.hidden = expanded;
});

Notes

Sur le contrôle, pas sur le contenu : aria-expanded se pose sur l’élément qui déclenche l’ouverture (le bouton), pas sur le panneau ouvert.

Combiner avec aria-controls : pour indiquer explicitement quel élément est contrôlé.

Pas d’état intermédiaire : contrairement à aria-checked, aria-expanded ne supporte pas mixed.