aria-pressed

Quand l’utiliser

Sur un bouton qui agit comme une bascule — couper/rétablir le son, suivre/ne plus suivre, gras/non-gras dans un éditeur de texte, barre latérale ouverte/fermée. Le bouton change d’état mais n’effectue pas de navigation ; l’étiquette reste la même et seul l’état activé communique le changement.

Trois valeurs sont valides :

• aria-pressed="false" — la bascule est désactivée.
• aria-pressed="true" — la bascule est activée.
• aria-pressed="mixed" — utilisé lorsque la bascule contrôle plusieurs sous-éléments dans un état mixte (certains activés, d’autres non). Rare en pratique ; la plupart des auteurs préfèrent des contrôles séparés.

Si votre bouton ne bascule pas — il soumet simplement un formulaire ou ouvre une fenêtre modale — n’utilisez pas aria-pressed. Utilisez aria-expanded pour les contrôles de divulgation, ou aucun attribut d’état pour les boutons d’action simples.

Comment le maintenir synchronisé

aria-pressed est un état, ce qui signifie qu’il change lorsque l’utilisateur interagit. Le gestionnaire de clic qui met à jour l’apparence visuelle du bouton doit également mettre à jour l’attribut. Les deux ne doivent jamais diverger — si l’icône indique son coupé, aria-pressed doit afficher "true".

<button
  type="button"
  aria-pressed="false"
  onclick="
    const next = this.getAttribute('aria-pressed') === 'true' ? 'false' : 'true';
    this.setAttribute('aria-pressed', next);
    toggleMute(next === 'true');
  "
>
  Mute
</button>

Échecs courants

• Définir aria-pressed sur un non-bouton (<div> ou <a>). Utilisez role="button" ou, mieux encore, passez à <button>.
• Basculer l’état visuel avec CSS sans jamais mettre à jour aria-pressed. Les utilisateurs de lecteurs d’écran continuent d’entendre le même état.
• Utiliser aria-pressed="true" sur un bouton qui ne bascule pas (un bouton « Envoyer ») — dérouterait la technologie d’assistance en annonçant un état non pertinent.
• Confondre aria-pressed avec aria-selected (pour les éléments dans un widget mono-sélection comme un onglet ou une option) ou aria-checked (pour les cases à cocher et boutons radio). Chacun a une sémantique différente ; choisissez celui qui correspond au modèle du composant.