Contrôle uniquement par icône

Silktide recherche les boutons et les liens qui sont identifiés uniquement par une icône, comme une croix de fermeture, un menu hamburger ou une loupe de recherche, sans nom textuel associé pour les personnes qui ne peuvent pas voir l’icône.

<!-- Problème : rien n’annonce ce que fait ce bouton -->
<button><svg>…</svg></button>

<!-- Correctif : nommez le contrôle -->
<button aria-label="Open menu"><svg>…</svg></button>

Pourquoi c’est important

Les personnes voyantes déterminent ce que fait un bouton d’icône grâce à sa forme et à son contexte. Les personnes qui utilisent un n’ont pas de solution de repli équivalente : sans , leur logiciel annonce un « bouton » ou un « lien » sans nom, ou lit du code résiduel comme le nom de classe CSS de l’icône. Chaque contrôle uniquement par icône sans nom est un contrôle que ces personnes doivent activer à l’aveugle ou ignorer complètement — et il s’agit souvent des contrôles les plus importants de la page : menus, recherche, fermeture, suivant.

Comment le corriger

Ajoutez une étiquette qui décrit ce que fait le contrôle, et non l’apparence de l’icône : aria-label="Search", et non aria-label="Magnifying glass".
Si le même libellé existe déjà sous forme de texte visible à proximité, référencez-le avec aria-labelledby au lieu de le dupliquer.
Si l’icône est une <img>, lui donner un texte alt significatif nomme également le contrôle.
Si le contrôle ne fait rien d’utile et n’existe qu’à des fins décoratives, rendez-le non interactif plutôt que de le nommer.

Comment Silktide effectue cette vérification

Repérez les boutons, les liens et les contrôles d’affichage visibles sur chaque page, y compris les éléments avec role="button" ou role="link".
Ignorez tout contrôle qui a déjà un nom : texte visible de 2 caractères ou plus, aria-label, aria-labelledby ou attribut title.
Vérifiez si les contrôles restants contiennent une icône : un SVG intégré, une image avec un texte alt vide ou du texte affiché dans une police d’icônes reconnue.
Signalez les contrôles qui affichent une icône, mais n’ont aucun nom.

Dépannage

Le contrôle est identifié d’une autre façon

Silktide reconnaît aria-label, aria-labelledby, title, le texte visible et le texte alt des images. Si votre contrôle est nommé au moyen d’un mécanisme autre que ceux-ci — ce qui est rare — vérifiez avec un lecteur d’écran que le nom est réellement annoncé, puis le résultat, le cas échéant.

L’icône est décorative et se trouve à côté de texte

Les contrôles contenant du texte visible significatif ne sont pas signalés, même lorsqu’une icône accompagne le texte. Si un contrôle a été signalé, son texte n’a pas atteint 2 caractères significatifs — le texte composé d’un seul glyphe, comme « × », ne compte pas comme une étiquette.