Description

Ce composant permet d'implémenter un bouton d'action, équivalent à l'élément HTML <button>.

Restitution

• le composant doit posséder un nom accessible ;
• l'état activé ou désactivé doit être vocalisé.

Interactions de base au clavier

Les interactions au clavier sont :

• La touche Espace doit déclencher le bouton.

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

Exemples de boutons

Test des boutons avec JAWS

Étape 1

1. Utiliser la touche Tabulation pour atteindre chacun des trois boutons de l'exemple.
2. Le premier bouton est actif. JAWS annonce : « Bouton, Confirmer votre message - 1 ».
3. Activer ce bouton à l'aide de la touche Espace.
   JAWS annonce : « Boîte de dialogue, message from web page : bouton 1 votre message est confirmé. bouton OK. Pour l'activer, barre Espace ».
4. Confirmer à l'aide de la touche Espace.

Étape 2

1. Le second bouton est désactivé.
   JAWS annonce : « bouton, confirmer votre message - 2, non disponible. ». Lorsque vous appuyez sur le bouton à l'aide de la touche Espace, rien ne se passe.

Étape 3

1. Le troisième bouton est actif et labellisé avec un passage de texte. JAWS annonce : « Bouton, confirmer votre message - 3 ».
2. Activer ce bouton à l'aide de la touche Espace.
   JAWS annonce : « Boîte de dialogue, message from web page : bouton 3 votre message est confirmé. Bouton OK. Pour l'activer, barre Espace ».
3. Confirmer à l'aide de la touche Espace.

Test des boutons avec NVDA

Étape 1

1. Utiliser la touche Tabulation pour atteindre chacun des trois boutons de l'exemple.
2. Le premier bouton est actif. NVDA annonce : « Confirmer votre message -1 bouton ».
3. Activer ce bouton à l'aide de la touche Espace.
   NVDA annonce : « Dialogue: bouton 1 votre message est confirmé. OK bouton ».
4. Confirmer à l'aide de la touche Espace.

Étape 2

1. Le second bouton est désactivé.
   NVDA annonce : « confirmer votre message -2, non disponible. ». Lorsque vous appuyez sur le bouton à l'aide de la touche Espace, rien ne se passe.

Étape 3

1. Le troisième bouton est actif et labellisé avec un passage de texte. NVDA annonce : « confirmer votre message - 3 bouton ».
2. Activer ce bouton à l'aide de la touche Espace.
   NVDA annonce : « Dialogue: bouton 3 votre message est confirmé. OK bouton ».
3. Confirmer à l'aide de la touche Espace.

Test des boutons avec VoiceOver

Étape 1

1. Utiliser la touche Tabulation pour atteindre chacun des trois boutons de l'exemple.
2. Le premier bouton est actif. VoiceOver annonce : « Confirmer votre message 1 bouton ».
3. Activer ce bouton à l'aide des touches VO + Espace.
   VoiceOver annonce le contenu et le title du bouton OK. Il ne vocalise pas le contenu de toute la boîte de dialogue. Il annonce juste que la boîte a trois éléments. Il faut se déplacer pour prendre connaissance du contenu à l'aide des touches VO + flèche droite et gauche.
4. Confirmer à l'aide des touches VO + Espace.

Étape 2

1. Le second bouton est désactivé.
   VoiceOver annonce : « confirmer votre message - 2, estompé, bouton. Cet élément est estompé ». Lorsque vous appuyez sur le bouton à l'aide des touches VO + Espace, VoiceOver émet un son et dit « estompé ».

Étape 3

1. Le troisième bouton est actif et labellisé avec un passage de texte. VoiceOver annonce : « confirmer votre message - 3 bouton ».
2. Activer ce bouton à l'aide des touches VO + Espace.
   VoiceOver annonce : « Dialogue : bouton 3 votre message est confirmé. OK bouton ». Comme pour le premier bouton, il faut se déplacer avec les touches VO + flèches afin de lire le contenu de toute la boîte de dialogue.
3. Confirmer à l'aide des touches VO + Espace.