AccessiaDes boutons n'ont pas de nom
Un bouton qui ne contient qu'une icône est annoncé « bouton » par un lecteur d'écran, sans indiquer ce qu'il fait.
Qui est gêné
Les personnes aveugles, qui doivent deviner la fonction du bouton, et souvent renoncer. Sur un bouton de fermeture de fenêtre, cela peut bloquer complètement la navigation.
D'où vient le problème
Le thème, presque toujours. Les icônes de panier, de recherche, de menu et de fermeture sont les cas les plus fréquents.
Comment corriger
- Ajoutez un attribut aria-label explicite sur le bouton : aria-label="Ouvrir le menu".
- Ou insérez un texte visuellement masqué à l'intérieur du bouton, ce que la plupart des thèmes prévoient avec une classe dédiée.
- Masquez l'icône avec aria-hidden="true" pour éviter une annonce en double.
À savoir. Un attribut title ne remplace pas un nom accessible : il n'est pas lu de façon fiable par tous les lecteurs d'écran, et il est invisible au clavier.
Référence
Critères concernés : RGAA 7.1, WCAG 4.1.2.
Identifiant de la règle dans les outils d'analyse :
button-name.
Accessia détecte ce défaut sur les pages publiques d'une boutique Shopify, indique s'il vient du contenu, du thème ou d'une application tierce, et compte le nombre d'occurrences.