enum Valeurs : true,false,mixed

aria-checked

Indique l'état coché d'un élément à deux ou trois états (case à cocher, bouton radio, commutateur).

Description

aria-checked indique si un élément de type case à cocher, bouton radio ou commutateur est coché (true), non coché (false), ou dans un état intermédiaire (mixed). L’état mixed s’applique aux cases à cocher parentes qui représentent une sélection partielle.

Syntaxe

<div role="checkbox" aria-checked="false" tabindex="0">Accepter les CGU</div>
<div role="checkbox" aria-checked="true" tabindex="0">Recevoir les offres</div>
<div role="checkbox" aria-checked="mixed" tabindex="0">Sélectionner tout</div>

Exemples

Case à cocher personnalisée :

<span role="checkbox"
      aria-checked="false"
      tabindex="0"
      id="opt-newsletter">
  S'abonner à la newsletter
</span>

Gestion clavier :

checkbox.addEventListener('keydown', e => {
  if (e.key === ' ') {
    e.preventDefault();
    const checked = checkbox.getAttribute('aria-checked') === 'true';
    checkbox.setAttribute('aria-checked', String(!checked));
  }
});

Case parent avec état mixte :

<li role="checkbox" aria-checked="mixed" tabindex="0">Fruits</li>
<ul>
  <li role="checkbox" aria-checked="true" tabindex="0">Pomme</li>
  <li role="checkbox" aria-checked="false" tabindex="0">Banane</li>
</ul>

Notes

Préférer les éléments natifs : <input type="checkbox"> gère nativement aria-checked — l’attribut n’est nécessaire que pour des widgets personnalisés avec role="checkbox".

État mixed : uniquement pour les cases à cocher partiellement sélectionnées, jamais pour les boutons radio.

Mise à jour dynamique : l’attribut doit être mis à jour en JavaScript à chaque changement d’état ; l’apparence visuelle seule ne suffit pas.

Support navigateurs