Description

Ce composant permet d'implémenter une case à cocher, équivalente au type HTML "checkbox".

Restitution

• Le composant doit posséder un nom accessible (ressource en anglais).
• l'état coché ou décoché doit être vocalisé.

Interactions de base au clavier

Les interactions au clavier sont :

• Les touches Espace et Entrée doivent cocher ou décocher la case à cocher.

Motif de conception : Checkbox (WAI-ARIA Authoring Practices 1.1)

Exemple d'une case à cocher

Test de la case à cocher avec JAWS

1. Tabuler sur le premier groupe de cases à cocher.
   JAWS n'active pas forcément le mode formulaire et annonce « case à cocher choisir la couleur, non coché
2. Activer le mode formulaire.
   JAWS annonce « choisir la couleur noir, case à cocher non cochée, après une tabulation il dit : « choisir la couleur rouge, case à cocher non cochée » et de même pour la troisième case.
3. Cocher la case à l'aide de la touche Espace. JAWS annonce « cochée ».
4. Tabuler jusqu'à la case isolée, en gardant le mode formulaire actif.
   JAWS annonce : « Case à cocher non cochée, acceptez les conditions d'utilisation ».
5. Lorsque vous cochez la case, JAWS annonce : « cochée ».

Test de la case à cocher avec NVDA

1. Tabuler sur le premier groupe de cases à cocher. NVDA n'active pas forcément le mode formulaire et annonce « Liste de trois éléments, Noir, choisir la couleur noir, case à cocher non cochée.
2. Activer le mode formulaire. NVDA annonce « choisir la couleur noir, case à cocher non cochée, après une tabulation il dit : « choisir la couleur rouge, case à cocher non cochée » et de même pour la troisième case.
3. Cocher la case à l'aide de la touche Espace. NVDA annonce « cochée
4. Tabuler jusqu'à la case isolée, en gardant le mode actif. NVDA annonce : « Case à cocher non cochée, acceptez les conditions d'utilisation ».
5. Lorsque vous cochez la case, NVDA annonce : « cochée

Test de la case à cocher avec VoiceOver

1. Tabuler sur le premier groupe de cases à cocher.
   VoiceOver annonce « choisir la couleur noir, case à cocher non cochée, case à cocher groupe, choisir la couleur, 3 éléments ».
2. Se déplacer à l'aide des flèches de direction (haut et bas). VoiceOver annonce : « Choisir la couleur rouge, non coché, case à cocher ». Même annonce pour la troisième case.
3. Cocher la case à l'aide de VO + Espace. VoiceOver annonce « cochée » et l'intitulé de la case.
4. Tabuler jusqu'à la case isolée.
   VoiceOver annonce : « acceptez les conditions d'utilisation, non coché, case à cocher principal 1 élément ».
5. Lorsque vous cochez la case, VoiceOver annonce : « cochée » et l'intitulé de la case.