Donnez un nom clair à chaque bouton

Faites comprendre en texte l’action de chaque bouton, y compris pour les boutons qui n’affichent qu’une icône.

Pourquoi c’est important

Un bouton sans nom risque d’être annoncé simplement comme « bouton ». Les personnes qui utilisent un lecteur d’écran ou la commande vocale ne peuvent alors ni le reconnaître ni l’activer.

Comment corriger

1. 1

   Privilégiez un texte visible sur le bouton, qui décrit l’action.

2. 2

   Ajoutez un aria-label quand un bouton avec seulement une icône est vraiment nécessaire.

3. 3

   Vérifiez que les boutons répétés restent compréhensibles hors de leur contexte.

Exemple

<button>
  <svg aria-hidden="true"><!-- icône de recherche --></svg>
</button>

<button aria-label="Rechercher">
  <svg aria-hidden="true"><!-- icône de recherche --></svg>
</button>

Comment vérifier votre correction

Vérifiez à nouveau votre page avec ibin. Le problème disparaît de votre rapport dès que tous les endroits sont corrigés. Essayez ensuite vous-même, comme le ferait un visiteur.

• Vérifiez à nouveau la page et assurez-vous que le problème n’apparaît plus dans votre rapport.
• Essayez vous-même la partie corrigée : à la souris, uniquement au clavier et en zoomant.
• Si possible, demandez à une personne qui utilise un lecteur d’écran de l’essayer aussi.

Également disponible en English, Nederlands, Deutsch