Noms et rôles

Les boutons ont besoin d’un nom

Règle: button-name
Gravité: Critique
Niveau WCAG A

Pourquoi c’est important

Un bouton dont le contenu se limite à une icône est annoncé « bouton », rien de plus. Dans une barre d’outils de six icônes, les six sonnent pareil.

Comment corriger

Mettez du texte visible dans le bouton quand la maquette le permet.
Sinon, ajoutez aria-label avec l’action formulée comme un verbe (« Fermer la boîte de dialogue »).
Mettez aria-hidden="true" sur l’icône pour qu’elle ne soit pas lue en plus de l’intitulé.
Vérifiez qu’une étiquette masquée en CSS n’est pas le seul nom : display:none la retire aussi du nom.

Dans le balisage

Échoue

<button><svg aria-hidden="true">...</svg></button>

Réussit

<button aria-label="Close dialog">
  <svg aria-hidden="true">...</svg>
</button>

L’exigence sous-jacente

Cette règle est une manière d’échouer aux critères de succès WCAG 2.2 suivants. Le W3C, qui rédige la norme, explique chacun d’eux :

4.1.2 Nom, rôle et valeur (s’ouvre dans un nouvel onglet) — Niveau WCAG A

Pour aller plus loin

Deque University sur button-name (s’ouvre dans un nouvel onglet)

Deque développe axe-core, le moteur open source utilisé par notre scanner. Sa page documente la règle telle que le moteur l’implémente.

Les contrôles automatiques trouvent les défaillances qu’un navigateur peut prouver. Ils ne peuvent pas juger si un sous-titrage est fidèle, si une alternative textuelle est utile, ni si une page s’utilise de bout en bout au clavier : cela demande une personne.