switch

Quand l’utiliser

Pour un contrôle de réglage binaire où « activé » et « désactivé » décrivent l’état mieux que « coché » et « non coché » — Wi-Fi, mode sombre, notifications, mode avion. Il n’existe pas d’élément HTML natif de type switch ; deux approches sont valides :

1. <button type="button" role="switch" aria-checked="false"> — recommandée, car vous héritez du focus et de l’activation natifs du bouton.
2. <input type="checkbox" role="switch"> — également acceptable ; la soumission du formulaire fonctionne toujours, et la substitution de rôle modifie l’annonce faite par les technologies d’assistance.

N’utilisez pas role="switch" pour des éléments qui ne sont pas véritablement binaires. Si l’action navigue, ouvre un menu ou lance un processus, utilisez button ou link.

Contrat clavier et focus

Conformément au modèle APG switch :

• Tab déplace le focus sur le switch.
• Espace bascule aria-checked. Entrée DEVRAIT également basculer (l’APG recommande les deux, car les utilisateurs attendent un comportement de bouton pour un switch basé sur un bouton).
• Le focus reste sur le switch après la bascule.

aria-checked n’accepte que "true" ou "false" sur un switch — "mixed" est invalide ici.

Erreurs courantes

• role="switch" sans aria-checked au premier rendu. L’état est obligatoire.
• aria-checked="mixed" sur un switch. Valide uniquement pour une case à cocher.
• Utilisation de aria-pressed au lieu de aria-checked. aria-pressed appartient à un bouton bascule (muet/non muet), où le bouton effectue une action. Un switch représente un état de réglage.
• Un switch qui ne met pas à jour aria-checked lorsqu’il est basculé uniquement via CSS.
• Zones de clic trop petites ne respectant pas WCAG 2.5.8 Taille de la cible. La zone interactive doit atteindre 24×24 pixels CSS.

Exemple

<button
  type="button"
  role="switch"
  aria-checked="false"
  onclick="
    const next = this.getAttribute('aria-checked') === 'true' ? 'false' : 'true';
    this.setAttribute('aria-checked', next);
  "
>
  Dark mode
</button>