Contrôle avec icône seule

Silktide recherche les boutons et les liens qui sont libellé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>

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

Pourquoi c’est important

Les utilisateurs voyants comprennent ce que fait un bouton avec icône grâce à sa forme et à son contexte. Les utilisateurs de ne disposent pas d’alternative équivalente : sans , leur logiciel annonce un « bouton » ou un « lien » sans nom, ou lit du code résiduel tel que le nom de classe CSS de l’icône. Chaque contrôle avec icône seule sans nom est un contrôle que ces utilisateurs 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 corriger le problème

Ajoutez un libellé décrivant ce que fait le contrôle, et non l’apparence de l’icône : aria-label="Rechercher", et non aria-label="Loupe".
Si le même libellé existe déjà sous forme de texte visible à proximité, faites-y référence avec aria-labelledby au lieu de le dupliquer.
Si l’icône est une <img>, lui attribuer un texte alt pertinent nomme également le contrôle.
Si le contrôle n’a aucune utilité et n’existe qu’à des fins décoratives, rendez-le non interactif au lieu de le nommer.

Comment Silktide effectue cette vérification

Rechercher les boutons, liens et contrôles d’affichage visibles sur chaque page, y compris les éléments avec role="button" ou role="link".
Ignorer tout contrôle qui possède déjà un nom : texte visible de 2 caractères ou plus, aria-label, aria-labelledby ou attribut title.
Vérifier 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.
Signaler les contrôles qui affichent une icône mais n’ont pas de nom.

Résolution des problèmes

Le contrôle est libellé d’une autre manière

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

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

Les contrôles comportant du texte visible pertinent 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 pertinents — un texte composé d’un seul glyphe, tel que « × », ne compte pas comme libellé.