Button

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.