Ce que c'est
De nombreux boutons sur les sites web modernes n'utilisent qu'une icône, sans texte visible — une loupe pour la recherche, une icône hamburger pour un menu, un X pour fermer une fenêtre. Un visiteur voyant reconnaît ces icônes instantanément par familiarité et contexte, mais un lecteur d'écran n'a rien à lire à voix haute à moins que le bouton n'ait aussi un texte accessible attaché en coulisses, généralement via un attribut aria-label (par exemple, aria-label="Rechercher") qui n'apparaît pas visuellement mais est annoncé à un lecteur d'écran.
Sans cela, un lecteur d'écran annonce simplement le mot générique "bouton", sans plus d'information, sans indication de ce que cela ferait de le presser.
Pourquoi c'est important
Une icône visuellement évidente pour une personne voyante ne porte aucune information en soi pour quelqu'un qui ne peut pas la voir — l'icône elle-même n'est pas intrinsèquement significative sans la vue, seul le concept qu'elle représente l'est, et ce concept doit être communiqué autrement pour un utilisateur de lecteur d'écran. Une page pleine de boutons à icône seule, chacun annoncé uniquement comme "bouton, bouton, bouton", laisse un utilisateur de lecteur d'écran sans aucun moyen de savoir ce que fait chacun d'eux, sinon deviner en les pressant pour le découvrir.
C'est un problème répandu et facile à manquer, précisément parce que les boutons à icône seule sont un motif de conception courant et visuellement épuré — l'écart d'accessibilité ne devient évident qu'en testant réellement avec un lecteur d'écran, et non en regardant simplement la page.
Comment le corriger
- Identifie chaque bouton de ton site qui n'utilise qu'une icône sans aucune étiquette de texte visible.
- Ajoute un attribut
aria-labeldécrivant l'action du bouton en quelques mots, par exemplearia-label="Fermer le menu"ouaria-label="Rechercher". - Quand c'est possible, envisage d'ajouter aussi une courte étiquette de texte visible à côté de l'icône — cela aide aussi les visiteurs voyants et réduit la dépendance à la mémorisation du sens des icônes.
- Si tu utilises un créateur de site, vérifie si les boutons à icône générés par la plateforme incluent déjà des étiquettes accessibles par défaut — certains le font, d'autres exigent de remplir toi-même un champ "nom accessible" ou "texte pour lecteur d'écran".
- Teste avec un lecteur d'écran gratuit (NVDA, VoiceOver) en naviguant à la tabulation vers chaque bouton à icône et en confirmant qu'il annonce une action claire et précise plutôt que juste "bouton".