aria-expanded

Quand l’utiliser

Sur tout contrôle qui ouvre et ferme une autre région de l’interface : un en-tête d’accordéon, un bouton de divulgation « voir plus », un déclencheur de combobox, un bouton de menu, un treeitem avec enfants, un bouton de navigation hamburger. Le contrôle reste le même élément dans les deux états — seul l’attribut bascule.

Si le contrôle modifie son propre état (muet / son activé, suivre / ne plus suivre), utilisez aria-pressed à la place. aria-expanded décrit une relation avec une autre région, généralement identifiée par aria-controls.

Le rôle détermine si aria-expanded est pertinent : il est pris en charge sur button, combobox, link, tab, treeitem, menuitem, gridcell, row, et quelques autres. Le placer sur un <div> sans rôle ne produit aucun effet utile.

Maintenir la synchronisation

Les valeurs valides sont "true" (région ouverte) et "false" (région fermée). Si l’attribut est omis, la valeur par défaut est « aucun état étendu » — ce qui est différent de "false". Si votre contrôle est parfois extensible, rendez aria-expanded="false" à l’état fermé plutôt que de le laisser absent.

Mettez à jour l’attribut dans le même chemin de code qui anime l’ouverture ou la fermeture de la région. L’attribut est la source de vérité que lisent les lecteurs d’écran ; le chevron visuel est un repère secondaire pour les utilisateurs voyants.

Associez-le à aria-controls="<region-id>" pour que le lecteur d’écran puisse annoncer la relation : « Filtres, bouton, réduit, contrôle filter-panel ». Certaines technologies d’assistance proposent un raccourci pour accéder directement à la région contrôlée.

Erreurs courantes

• Basculer une classe CSS sur le panneau sans mettre à jour aria-expanded.
• Utiliser aria-expanded sur un élément non-interactif sans rôle. L’attribut est ignoré.
• N’ajouter que aria-expanded="true" — ne jamais rendre l’état "false". Les lecteurs d’écran n’annoncent rien à l’état fermé.
• Utiliser aria-expanded sur un contrôle qui n’étend pas réellement une région (un bouton « Envoyer »).
• Confondre aria-expanded et aria-pressed sur les boutons bascule qui n’ouvrent pas de région séparée.
• Omettre aria-controls, laissant la relation entre le déclencheur et le panneau implicite.

Exemple

<button
  type="button"
  aria-expanded="false"
  aria-controls="filters-panel"
  onclick="toggle(this)"
>
  Filtres
</button>

<div id="filters-panel" hidden>
  <!-- contrôles de filtres -->
</div>