Bonnes pratiques

Boutons sans nom accessible : le défaut n°1 des scanners

Les boutons icône sans nom accessible (loupe, panier, croix, menu burger) sont le défaut le plus détecté par les analyses d'accessibilité. Pour un utilisateur de lecteur d'écran, il n'entend que « bouton » sans contexte. Découvrez les quatre techniques pour les corriger.

Chiffres, méthodologie et conditions de reprise : voir les données citables →

La réponse courte

Un bouton icône SVG ou image sans attribut aria-label, aria-labelledby ou texte visible reste invisible pour un lecteur d'écran. L'utilisateur entend « bouton » seul. Pour corriger : ajoutez aria-label pour une courte étiquette, utilisez du texte visible si l'espace le permet, ou aria-labelledby pour lier à un texte présent. Vérifiez avec F12 : l'onglet Accessibility doit afficher le nom du bouton.

Pourquoi ce défaut est critique

Les boutons sans nom accessible figurent parmi les violations WCAG les plus fréquentes aux États-Unis, selon les données publiques des cabinets de conformité. La règle W3C dédiée (« Image button has non-empty accessible name ») s'applique partout : une loupe de recherche, un panier d'achat, une croix de fermeture, un chevron de carrousel, une icône réseau social - tous demandent un nom audible.

Cet article s'appuie sur l'étude Inclaria 2026 : parmi les 55 sites de e-commerce français analysés, 94,5 % présentent au moins une non-conformité critique ou sérieuse. Les boutons icône mal nommés figurent en tête des occurrences détectées, souvent sur plusieurs pages du même site.

Ce qu'entend un utilisateur de lecteur d'écran

Placez-vous à la place de quelqu'un qui navigue sans voir l'écran. Lorsqu'il atteint un bouton loupe sans nom accessible, son lecteur d'écran annonce simplement « Bouton » - puis s'arrête. Aucun contexte, aucune indication de l'action. Il doit quitter le lecteur d'écran, ouvrir l'inspecteur du navigateur, ou recourir à une documentation externe pour comprendre de quoi il s'agit.

Même scénario avec un panier d'achat présenté comme une icône SVG seule, une croix de fermeture de modale, ou des chevrons pour naviguer un carrousel. Chaque bouton muet crée une zone d'incertitude pour l'utilisateur. Sur un site à 15 ou 20 boutons icône mal nommés, la friction s'accumule rapidement : certains utilisateurs abandonnent.

Les quatre techniques pour nommer un bouton

1. Texte visible avec visibilité cachée (sr-only)

Ajoutez un élément span de classe sr-only contenant le libellé. Invisible sur l'écran, audible pour les lecteurs d'écran.

Code

Bouton contenant une icône SVG de loupe et un élément span de classe « sr-only » avec le texte « Rechercher ».

Avantage : le texte est aussi dans le DOM, donc techniquement visitable par un moteur de recherche. Inconvénient : suppose une classe CSS sr-only définie dans votre feuille de style.

2. aria-label

Attribut direct sur le bouton : aria-label=« Rechercher ». Court, facile, et n'affecte pas le DOM visuel.

Avantage : minimaliste, rapide à ajouter. Inconvénient : absent du texte visible, donc invisible au copier-coller et au SEO texte.

3. aria-labelledby

Relie le bouton à un autre élément textuel du DOM via un identifiant : aria-labelledby=« search-label ». Idéal quand un texte pertinent existe déjà sur la page.

Avantage : fait référence à du contenu réel, traçable. Inconvénient : nécessite que le texte source existe et soit pourvu d'un id unique.

4. Attribut alt sur input type=image

Si vous utilisez un input de type image avec la source « search.png » et le texte alternatif « Rechercher », l'attribut alt sert directement de nom accessible.

Avantage : sémantique native. Inconvénient : solution obsolète en HTML moderne, rarement recommandée.

Quand utiliser chacune ? Matrice de décision

Pièges courants

L'attribut title ne suffit pas

De nombreux développeurs croient à tort que l'attribut title=« Rechercher » sur un bouton suffit à le nommer. En réalité, title est un attribut de conseil au survol (tooltip), pas un nom accessible. Les lecteurs d'écran l'ignorent, sauf exception très limitée. N'y comptez pas.

aria-label en langue étrangère

Si votre contenu mélange les langues, attention : aria-label utilise toujours la langue de la page. Un aria-label=« Search » sur un site français sera lu en français par le lecteur d'écran. Préférez du texte visible ou assurez-vous que aria-label respecte la langue locale.

Le piège 2.5.3 : « Label in Name »

Un piège subtil : si un bouton a du texte visible (ex. « OK »), son aria-label doit commencer par ce même texte ou le contenir. Un bouton affichant « OK » avec aria-label=« Valider » crée une incohérence que les utilisateurs de commande vocale (« cliquez sur OK ») ne peuvent pas déclencher. Alignez le nom accessible au texte visible.

SVG sans role approprié

Un SVG seul n'est qu'une image. Logez-le toujours dans un élément sémantique (button, a) ou ajoutez role=« button ». Sans cela, le lecteur d'écran peut l'ignorer ou l'annoncer comme une image.

Comment vérifier en deux minutes

Ouvrez votre page dans n'importe quel navigateur moderne (Chrome, Firefox, Safari).

• Appuyez sur F12 (ou clic droit, puis Inspecter).
• Repérez le bouton icône dans l'HTML.
• Ouvrez l'onglet Accessibility (Chrome, Edge, Firefox).
• Consultez le champ Accessible Name : il doit afficher un texte clair (ex. « Rechercher », « Panier »). S'il est vide ou dit « button », il manque un nom.

Alternativement : naviguez au clavier (Tab) jusqu'au bouton, puis testez avec un lecteur d'écran gratuit.

Test au clavier et au lecteur d'écran

Sur Windows, NVDA (gratuit, open source) est fiable. Sur Mac, VoiceOver est préinstallé (Cmd+F5). Parcourez votre site : chaque bouton icône doit annoncer son nom clairement. Si vous n'entendez que « bouton », corrigez.

Cas concrets : loupe, panier, croix, chevrons

Loupe de recherche

Un bouton avec aria-label=« Rechercher » contenant une icône SVG est l'approche standard. Courte, claire. Si vous employez du texte caché : utilisez un bouton contenant l'icône SVG et un élément span de classe « sr-only » avec le texte « Rechercher ».

Panier d'achat

Préférez aria-label=« Panier » ou aria-label=« Voir le panier (2 articles) ». Un nombre d'articles peut enrichir le contexte sans surcharger l'annonce.

Croix de fermeture

Un bouton avec aria-label=« Fermer » contenant une icône SVG de croix est classique. Un texte simple, sans jargon.

Chevrons de carrousel

Des boutons avec aria-label=« Élément suivant » et aria-label=« Élément précédent » guident l'utilisateur. Évitez les génériques type « Suivant » ou « Précédent » seuls ; précisez : « Précédent slide du carrousel ».

Icônes sociales

Un lien avec aria-label=« Nous suivre sur X (Twitter) » ou un bouton avec aria-label=« Partager sur LinkedIn » rend explicite le réseau cible.

Intégration dans votre démarche de conformité

Les boutons sans nom accessible sont le défaut numéro un détecté par les scans automatisés. Si vous lancez un audit d'accessibilité sur votre site, cette violation apparaîtra presque certainement, souvent avec des dizaines d'occurrences.

La bonne nouvelle : elle est facile et rapide à corriger. Une fois que vous saisissez le pattern, vous pouvez auditer votre codebase, fixer les boutons icône en quelques heures, et mesurer l'impact : une part significative de votre score d'accessibilité s'améliore immédiatement.

Une stratégie efficace : lancez un scan automatisé (Inclaria, aXe, WAVE), triez les résultats par gravité, et commencez par les boutons sans nom accessible. Cela seul retire une part significative des non-conformités critiques sur beaucoup de sites. Ensuite, progressez vers les tests manuels et les défauts structurels (navigation au clavier, ordre des tabulations, contrastes).