Case à cocher

Démo : CodePen

Description technique

Structure HTML accessible

La structure HTML doit être sémantique et inclure des attributs ARIA pour une meilleure compréhension par les technologies d’assistance.

• Étiquette (<label>) : Associée à la case à cocher pour indiquer son objectif.
• Case à cocher (<input type="checkbox">) : Utilisée pour la sélection ou la désélection d'une option.
• Attributs ARIA et propriétés :
  • aria-checked : Indique l'état actuel de la case à cocher (vrai, faux ou indéterminé).
  • aria-labelledby ou aria-label : Fournit une description accessible si l'étiquette visible n'est pas suffisante.

Comportement javascript accessible

• Mise à jour dynamique : Si l'état de la case à cocher est modifié via JavaScript, s'assurer que l'attribut aria-checked est mis à jour en conséquence.
• Gestion du Focus : Assurer que la case à cocher est focusable et que les utilisateurs peuvent naviguer jusqu'à elle en utilisant le clavier.

Bonnes pratiques d’accessibilité

• Respect des standards :
  • Suivre les directives WCAG 2.1, notamment le critère 4.1.2 sur les propriétés et états du nom.
• Messages visuels et auditifs :
  • Fournir des retours visuels clairs sur l'état de la case à cocher (par exemple, une coche visible lorsqu'elle est sélectionnée).
  • Assurer que les changements d'état sont annoncés par les technologies d’assistance.
• Compatibilité multi-appareils :
  • Tester la case à cocher sur différents appareils et navigateurs pour garantir une expérience uniforme.

Recommandations supplémentaires

• Amélioration de l’expérience utilisateur :
  • Fournir des descriptions supplémentaires si nécessaire pour clarifier l'objectif de la case à cocher.
  • Assurer que la zone cliquable est suffisamment grande pour faciliter l'interaction, en incluant l'étiquette associée.

Exemple de code accessible

<form>
  <div>
    <input type="checkbox" id="subscribe" name="subscribe" aria-checked="false" aria-labelledby="subscribeLabel">
    <label id="subscribeLabel" for="subscribe">S'abonner à la newsletter</label>
  </div>
  <div id="error-message" style="color: red; display: none;" aria-live="assertive"></div>
  <button type="submit">Soumettre</button>
</form>

<script>
  const checkbox = document.getElementById('subscribe');
  const errorMessage = document.getElementById('error-message');

  // Gestion de l'état de la case à cocher
  checkbox.addEventListener('change', () => {
    checkbox.setAttribute('aria-checked', checkbox.checked ? 'true' : 'false');
  });

  // Validation du formulaire
  document.querySelector('form').addEventListener('submit', (event) => {
    if (!checkbox.checked) {
      event.preventDefault();
      errorMessage.style.display = 'block';
      errorMessage.textContent = 'Vous devez accepter les conditions pour continuer.';
    } else {
      errorMessage.style.display = 'none';
      errorMessage.textContent = '';
    }
  });
</script>