aria-checked

Quand l’utiliser

Sur les widgets ayant une sémantique de case binaire ou tri-état : role="checkbox", role="radio", role="menuitemcheckbox", role="menuitemradio" et role="switch". Si vous utilisez le natif <input type="checkbox"> ou <input type="radio">, le navigateur expose déjà l’état coché à la technologie d’assistance — ne le dupliquez pas avec aria-checked.

Distinguez-le des états voisins :

• aria-checked — pour « cette option est sélectionnée dans un ensemble de choix, souvent indépendamment des autres ». Cases à cocher et boutons radio.
• aria-pressed — pour les boutons bascule (muet / sonore). L’élément est conceptuellement un bouton ; l’état indique si l’action est actuellement activée.
• aria-selected — pour les éléments dans un conteneur à sélection unique comme un tablist, listbox ou tree. L’état appartient au modèle de sélection du conteneur, pas à l’élément lui-même.

Comment le maintenir synchronisé

Les valeurs valides sont "true", "false", "mixed" et "undefined". Utilisez "mixed" uniquement sur une case à cocher parente qui récapitule un groupe de cases enfants dans des états incohérents (le classique motif indéterminé « tout sélectionner »). "undefined" est rare en pratique ; la plupart des auteurs utilisent plutôt "false".

L’attribut doit refléter ce que l’utilisateur voit. Quel que soit le gestionnaire de clic ou clavier qui met à jour la coche visuelle, il doit également écrire la nouvelle valeur aria-checked dans le même chemin de code. Ne jamais appliquer un style « coché » en CSS sans basculer l’attribut.

Pour role="radio" dans un radiogroup, exactement une option doit porter aria-checked="true" à tout moment ; les autres doivent être à "false" (pas absentes).

Erreurs fréquentes

• Omettre aria-checked entièrement sur un élément role="checkbox" — le lecteur d’écran annonce « case à cocher » sans état.
• Basculer une classe pour afficher la coche sans jamais mettre à jour aria-checked.
• Utiliser aria-checked="true" sur un natif <input type="checkbox"> — le navigateur l’ignore et l’état dupliqué peut se désynchroniser.
• Définir aria-checked="mixed" sur une seule case à cocher plutôt que sur une parente qui récapitule les enfants.
• Laisser des boutons radio frères sans aria-checked="false" — la technologie d’assistance ne peut pas inférer l’état non coché.
• Confondre aria-checked avec aria-selected sur des options de listbox ou des onglets.

Exemple

<div role="group" aria-labelledby="prefs-heading">
  <h3 id="prefs-heading">Email preferences</h3>

  <div
    role="checkbox"
    tabindex="0"
    aria-checked="false"
    onclick="toggle(this)"
    onkeydown="if (event.key === ' ') { event.preventDefault(); toggle(this); }"
  >
    Send me weekly summaries
  </div>
</div>