Veiller à ce que les liens aient un texte discernable
Les normes d’accessibilité du web exigent que le texte des liens et le texte alternatif des images, lorsqu’ils sont utilisés comme liens, soient perceptibles par un lecteur d’écran. Ils ne doivent pas non plus comporter d’étiquette en double et doivent pouvoir être mis en évidence.
Pourquoi c’est important
Des éléments de lien inaccessibles peuvent créer des obstacles à l’accessibilité. Les utilisateurs de sites web qui se fient à la navigation au clavier ne peuvent cliquer que sur les liens qui peuvent faire l’objet d’une mise au point programmatique.
Les utilisateurs de lecteurs d’écran ont également besoin de savoir où pointe un lien. Le texte du lien interne fournit cette information, mais les lecteurs d’écran doivent pouvoir y accéder.
Résolution du problème
Veillez à ce que tous les noms de liens soient accessibles et puissent faire l’objet d’une mise au point programmatique. Le texte du lien ne peut pas être caché (par exemple avec display : none ou aria-hidden=« true »).
Pour s’assurer que tous les liens peuvent recevoir une attention programmatique, évitez les événements Javascript spécifiques à l’appareil tels que onmouseover(), mouseover(), hover(), onmouseout(), mouseout(). Remplacez-les par des événements indépendants de l’appareil tels que onfocus(), focus(), onblur() ou blur().
Il est également important de ne pas modifier le style des liens pour supprimer le changement de style lorsqu’un lien est en focus programmatique. La modification du style des liens empêche les utilisateurs de clavier voyants de savoir où ils se trouvent sur la page. Enfin, assurez-vous que vous créez de vrais liens en utilisant un élément avec l’attribut href.
Bon exemple de code :
<h4>Neighborhood News</h4>
<p>Seminole tax hike: Seminole city managers are proposing a 75% increase in
property taxes for the coming fiscal year.
<a href=”taxhike.html” aria-label=”Read more about Seminole tax hike”>[Read more…]</a>
</p>
<p>Baby Mayor: Seminole voters elect the city’s youngest mayor ever by voting in 3 year
old Willy “Dusty” Williams in yesterday’s mayoral election.
<a href=”babymayor.html” aria-label=”Read more about Seminole’s new baby mayor”>[Read more…]</a>
</p>
Cas de test
Pour plus d’exemples, visitez la bibliothèque des règles ATC du W3C sur GitHub.