enum Valeurs : true,false,mixed

aria-pressed

Indique l'état enfoncé ou non d'un bouton bascule (toggle button).

Description

aria-pressed transforme un bouton ordinaire en bouton bascule. La valeur true indique que le bouton est actuellement activé (enfoncé) ; false qu’il est désactivé ; mixed un état intermédiaire (rare, pour les boutons dont l’action s’applique partiellement).

Syntaxe

<button aria-pressed="false">Gras</button>
<button aria-pressed="true">Italique</button>

Exemples

Bouton muet dans un lecteur audio :

<button type="button" aria-pressed="false" id="btn-mute">
  🔊 Son
</button>

<script>
  const btn = document.getElementById('btn-mute');
  btn.addEventListener('click', () => {
    const pressed = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', String(!pressed));
    btn.textContent = pressed ? '🔊 Son' : '🔇 Muet';
  });
</script>

Barre d’outils de mise en forme :

<div role="toolbar" aria-label="Mise en forme">
  <button aria-pressed="true">Gras</button>
  <button aria-pressed="false">Italique</button>
  <button aria-pressed="false">Souligné</button>
</div>

Notes

Différence avec aria-checked : aria-pressed s’utilise sur des éléments avec role="button" (ou <button>) ; aria-checked s’utilise avec role="checkbox" ou role="switch".

Mise à jour obligatoire : l’attribut doit être mis à jour en JavaScript à chaque clic. Sans mise à jour, l’état annoncé sera faux.

État mixed : utilisable quand un bouton représente un formatage appliqué à une sélection partielle (une partie en gras, une partie non).

Support navigateurs