Identifiants d’étiquette ARIA manquants
Silktide vérifie les éléments qui tirent leur d’autres éléments par ID, et signale les références à des ID qui n’existent pas sur la page. Une référence brisée laisse l’élément sans le nom qu’il était censé avoir.
L’attribut aria-labelledby nomme un élément en pointant vers l’id de l’élément qui contient son libellé — un titre qui nomme une boîte de dialogue, ou un libellé qui nomme un contrôle :
<!-- Problème : la référence indique "dialog-label" mais l’id du titre est "dialog-labell" -->
<h2 id="dialog-labell">Message important !</h2>
<div role="dialog" aria-labelledby="dialog-label">
Pourquoi c’est important
Le nom accessible est ce qu’un annonce quand un visiteur atteint un élément. Quand une référence aria-labelledby pointe vers rien, l’élément peut être annoncé sans aucun nom — une boîte de dialogue sans nom, un bouton sans nom — et la personne doit deviner sa fonction. Ces ruptures sont invisibles : la page a l’air identique, et même des tests utilisateurs minutieux repèrent rarement un nom qui a échoué à s’attacher en silence. Les ID sont renommés et le contenu est restructuré, donc les références se dégradent avec le temps.
Comment corriger
- Trouvez l’élément qui devait fournir le nom, et faites en sorte que la valeur de
aria-labelledbycorresponde exactement à sonid(les ID sont sensibles à la casse) :
<!-- Correction : la référence correspond à l’id du titre -->
<h2 id="dialog-label">Message important !</h2>
<div role="dialog" aria-labelledby="dialog-label">
- Si l’élément servant de libellé a été supprimé, rétablissez-le ou remplacez-le par un attribut
aria-labelcontenant le nom en texte. - Quand un élément est nommé par plusieurs autres, énumérez chaque ID séparé par des espaces et vérifiez chacun.
Comment Silktide teste cela
- Repérer chaque élément ayant un attribut
aria-labelledbysur chaque page. - Scinder la valeur de l’attribut en ID individuels.
- Signaler chaque ID référencé qui n’existe nulle part sur la page.