« Buttons must have discernible text » : ce message d’axe DevTools est apparu sur le bouton de partage d’un article, lors de l’audit du site web d’un journal de presse locale qui venait de refondre entièrement sa page article. Le bouton en question, une simple icône représentant une flèche sortante, s’affichait correctement, réagissait au clic, ouvrait bien la fenêtre de partage attendue. Pour un lecteur d’écran, pourtant, il n’existait tout simplement pas de nom : l’annonce se limitait à « bouton », sans aucune indication de sa fonction.
Symptôme : un bouton muet malgré une icône visible
Le code source du bouton ressemblait à ceci avant correction :
<button class="btn-partage">
<svg aria-hidden="true">...</svg>
</button>L’attribut aria-hidden="true" sur le SVG était en réalité correctement posé : il masque l’icône décorative aux technologies d’assistance, ce qui est la bonne pratique quand une icône n’apporte aucune information supplémentaire. Le problème venait d’ailleurs : rien, nulle part dans ce bouton, ne fournissait de texte alternatif à l’action elle-même. Masquer l’icône sans fournir de remplacement revient à supprimer la seule source d’information disponible.
Diagnostic : où chercher le nom accessible manquant
Un bouton obtient son nom accessible, par ordre de priorité, depuis l’un de ces éléments : son contenu textuel visible, un attribut aria-label, ou un élément référencé par aria-labelledby. Dans le cas du bouton de partage, aucune de ces trois sources n’existait : le contenu textuel était masqué par aria-hidden, et aucun attribut de nommage n’avait été ajouté en remplacement.
La vérification se fait directement dans les outils de développement du navigateur, onglet accessibilité, en inspectant l’élément : le champ « Nom accessible » y apparaît vide, confirmant le diagnostic posé par axe DevTools.
Correctif : un texte masqué visuellement, pas masqué pour tout le monde
La correction la plus robuste ajoute un texte réellement présent dans le DOM, mais masqué uniquement à l’écran grâce à une classe utilitaire, plutôt que de s’appuyer sur aria-label seul :
<button class="btn-partage">
<svg aria-hidden="true">...</svg>
<span class="masque-visuellement">Partager cet article</span>
</button>.masque-visuellement {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}Cette approche par texte réel plutôt que par aria-label présente un avantage supplémentaire : elle reste traduisible automatiquement si le site passe un jour par un outil de traduction, alors qu’un attribut aria-label codé en dur dans un thème est souvent oublié lors de ce type d’opération.
Prévention : centraliser le composant bouton-icône
Le site comptait sept boutons du même type dispersés dans différents gabarits : partage, impression, agrandissement d’image, fermeture de bandeau, ouverture de recherche, basculement de thème sombre, retour en haut de page. Corriger chacun séparément aurait laissé la porte ouverte à une nouvelle régression au prochain ajout. La solution retenue a été de créer une fonction PHP unique, appelée partout où un bouton-icône est nécessaire :
function wpm_bouton_icone($icone_svg, $libelle, $classes = '') {
printf(
'<button class="btn-icone %1$s">%2$s<span class="masque-visuellement">%3$s</span></button>',
esc_attr($classes),
$icone_svg,
esc_html($libelle)
);
}Chaque appel de cette fonction impose de fournir un libellé, sans quoi le bouton ne s’affiche pas correctement — un garde-fou qui rend l’erreur visible dès le développement plutôt qu’à l’audit final.
Vérifier que la correction tient dans le temps
- Relancer axe DevTools sur la page article : l’erreur « Buttons must have discernible text » doit disparaître ;
- Tester au lecteur d’écran : l’annonce doit devenir « Partager cet article, bouton » ;
- Ajouter un test automatisé qui échoue si un futur bouton-icône est ajouté sans passer par la fonction centralisée.
Une icône seule n’est jamais un problème en soi : c’est l’absence de texte de remplacement, quelque part dans le code, qui transforme un bouton fonctionnel en bouton muet pour une partie des visiteurs.
Notre verdict
L’erreur « Buttons must have discernible text » se corrige presque toujours de la même manière : ajouter un texte réel, masqué visuellement, à côté de l’icône décorative. Le vrai travail de fond consiste ensuite à centraliser ce motif dans un composant unique, pour que la correction profite à tous les boutons du site présents et futurs, sans dépendre de la vigilance de chaque développeur au moment d’en créer un nouveau.
