Liens pour lecteurs d’écran
Silktide repère des éléments de lien mal formés qui les rendent inutilisables pour les : liens sans texte lisible, liens sans destination et balises de lien vides laissées à l’abandon dans la page.
Pour qu’un lien fonctionne avec les technologies d’assistance, il a besoin à la fois d’une destination (un attribut href) et de contenu lisible à l’intérieur :
<!-- Fonctionne : destination et texte lisible -->
<a href="/about">À propos de nous</a>
<!-- Fonctionne : un lien image avec un 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 qui a une destination mais pas de texte est annoncé simplement comme « lien » : l’utilisateur peut l’activer mais ne sait pas où il mène. Un lien qui a du texte mais pas de destination semble cliquable mais n’emmène nulle part. Ces deux schémas rompent le contrat de base qui permet aux personnes utilisant des technologies d’assistance de naviguer dans une page via ses liens.
Comment corriger
- Pour un lien qui a une destination mais pas de texte lisible : ajoutez du texte à l’intérieur du lien, ou un s’il ne contient qu’une image.
- Pour un lien qui a du texte mais pas de destination : ajoutez l’
hrefmanquant, ou si l’élément est en réalité une cible pour que d’autres liens y accèdent, déplacez sonidvers un élément non lié à la place :
<!-- Ancre 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 vides
<a></a>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 que de naviguer — utilisez un élément
<button>, ou ajoutezrole="button"à la balise existante.
Comment Silktide teste cela
- Trouver 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 cas problématiques :
- Un lien avec un
hrefmais sans texte lisible. - Un élément avec du texte et un
idounamemais sanshref— une cible qui se fait 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 cas ne sont délibérément pas signalés :
<a>avec du texte mais sanshref,idniname— HTML5 l’autorise comme « lien factice », souvent complété plus tard par le .- Ancres vides avec un
idounamemais sanshref— ce sont d’anciennes cibles de saut, pas des liens.