Guide d’implémentation d’une case à cocher accessible

Introduction

Les cases à cocher sont des éléments d'interface utilisateur courants permettant aux utilisateurs de sélectionner ou de désélectionner des options. Assurer leur accessibilité est essentiel pour que tous les utilisateurs, y compris ceux utilisant des technologies d’assistance, puissent interagir avec elles de manière efficace.

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>