Liens pour lecteurs d’écran
Silktide repère des éléments de lien mal formés qui les rendent inutilisables avec la — des liens sans texte lisible, des liens sans destination, et des balises de lien vides laissées dans la page.
Pour qu’un lien fonctionne avec une technologie d’assistance, il lui faut à la fois une destination (un
attribut href) et un contenu lisible :
<!-- Fonctionne : destination et texte lisible -->
<a href="\/about">À propos de nous</a>
<!-- Fonctionne : un lien image avec texte alternatif -->
<a href="\/apple"><img src="apple.png" alt="Apple"></a>
Pourquoi c’est important
Un annonce chaque lien par son texte. Un lien avec une destination mais sans texte est annoncé simplement « lien » : l’utilisateur peut l’activer mais ne sait pas où il mène. Un lien avec du texte mais sans destination semble cliquable, mais n’aboutit nulle part. Ces deux modèles rompent le contrat fondamental qui permet aux personnes utilisant des technologies d’assistance de naviguer dans une page au moyen de ses liens.
Comment corriger
- Pour un lien avec une destination mais sans texte lisible : ajoutez du texte à l’intérieur du lien, ou un s’il ne contient qu’une image.
- Pour un lien avec du texte mais sans destination : ajoutez l’
hrefmanquant, ou si l’élément est en réalité une cible vers laquelle d’autres liens doivent pointer, déplacez sonidsur un élément qui n’est pas un lien :
<!-- Ancre de cible héritée, déconseillée en HTML5 -->
<a name="example"></a>
<!-- Préféré : un id sur un élément normal -->
<div id="example">...</div>
- Pour les balises
<a></a>vides sans aucun attribut : supprimez-les, elles ne servent à rien. Elles sont souvent laissées par des éditeurs ou des scripts. - Si l’élément est en réalité un bouton — il déclenche une action plutôt qu’une navigation —
utilisez un élément
<button>, ou ajoutezrole=\"button\"à la balise existante.
Comment Silktide teste cela
- Rechercher chaque élément
<a>sur la page et lire son texte (y compris le texte alternatif des images et le texte ajouté par le CSS), sonhref, ainsi que tout attributidouname. - Signaler trois modèles problématiques :
- Un lien avec un
hrefmais sans texte lisible. - Un élément avec du texte et un
idounamemais sanshref— une cible se faisant passer pour un lien, ou un lien auquel il manque sa destination. - Une ancre complètement vide, sans texte,
href,idniname.
- Un lien avec un
- Deux modèles ne sont volontairement pas signalés :
<a>avec du texte mais sanshref,idniname— HTML5 l’autorise comme « lien fictif », souvent complété plus tard par le .- Ancres vides avec un
idounamemais sanshref— ce sont des cibles de saut héritées, pas des liens.