Switch - Interrupteur

Composant permettant d'activer/désactiver une option.

Rôle et attributs ARIA

Rôles et attributs ARIA générés par défaut

  • Élément principal : <input type=”checkbox” role="switch">
  • Attributs ARIA utilisés :
    • aria-checked="false"

 

Attributs de l’élément ayant un impact sur l’accessibilité

Attribut

Impact

checked

Ajoute les attributs checked et aria-checked=”true” à l’élément interactif.

disabled

Ajoute les attributs disabled et aria-disabled à l’élément interactif.

readonly

Ajoute les attributs readonly et aria-disabled à l’élément interactif.

required

Ajoute l’attribut required à l’élément interactif, et affiche un astérisque à gauche du label

 

Navigation et interaction clavier

Touches supportées :

  • Espace, Entrer → Bascule l’état du switch entre activé et désactivé
  • Flèche gauche → Désactive le switch
  • Flèche droite → Active le switch

 

Bonnes pratiques et pièges à éviter

 

Référence