Identifiants de libellé 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 rompue laisse l’élément sans le nom qu’il était censé avoir.
L’attribut aria-labelledby donne un nom à 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\">Important message!</h2>
<div role=\"dialog\" aria-labelledby=\"dialog-label\">
Pourquoi c’est important
Le nom accessible est ce qu’un
annonce lorsqu’un visiteur
atteint un élément. Lorsque la référence aria-labelledby ne pointe vers rien,
l’élément peut être annoncé sans aucun nom — une boîte de dialogue sans nom, un
bouton sans nom — et le visiteur doit deviner sa fonction. Ces ruptures sont
invisibles : la page semble identique, et même des tests utilisateurs minutieux
détectent rarement qu’un nom a échoué à s’attacher en silence. Les ID sont renommés
et le contenu est restructuré ; les références se dégradent avec le temps.
Comment le corriger
- Trouvez l’élément censé fournir le nom, et faites correspondre
exactement la valeur de
aria-labelledbyà sonid(les ID sont sensibles à la casse) :
<!-- Corrigé : la référence correspond à l’id du titre -->
<h2 id=\"dialog-label\">Important message!</h2>
<div role=\"dialog\" aria-labelledby=\"dialog-label\">
- Si l’élément servant de libellé a été supprimé, soit rétablissez-le, soit utilisez
à la place un attribut
aria-labelcontenant le nom sous forme de texte. - Lorsqu’un élément est nommé par plusieurs autres, listez chaque ID séparé par des espaces et vérifiez chacun d’eux.
Comment Silktide teste cela
- Repérer chaque élément avec 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.