Comment créer des liens accessibles : le guide complet

Pourquoi l’accessibilité des liens est essentielle

Les liens sont au cœur de la navigation sur le web. Pour beaucoup d’utilisateurs, ils représentent la porte d’entrée vers un nouveau contenu ou une nouvelle action. Lorsqu’ils sont mal conçus, ils peuvent créer des obstacles majeurs. Voici quelques exemples, selon certains types de handicaps ou de contextes techniques :

  • Pour les personnes aveugles ou malvoyantes : les lecteurs d’écran offrent une fonctionnalité qui permet de lister uniquement les liens d’une page. Si ceux-ci ne sont pas explicites, l’utilisateur se retrouve face à une succession de “cliquez ici” ou “en savoir plus”, sans savoir où ces liens mènent.

  • Pour les personnes à mobilité réduite : une zone cliquable trop petite ou un lien trop proche d’un autre complique l’usage du clavier ou des dispositifs de pointage alternatifs.

  • Pour les personnes ayant des troubles cognitifs : un libellé ambigu ou peu clair peut générer de la confusion et décourager la navigation.

  • Dans certains contextes techniques : un lien mal identifié peut poser des problèmes d’indexation ou de référencement.

Bref, un lien se doit d’être accessible. C’est meilleur pour la performance globale du site, son référencement, et pour l’inclusion de tous vos visiteurs bien sûr.

Les bonnes pratiques à respecter

1. Fournir un intitulé de lien explicite

Un lien doit avoir un libellé qui décrit clairement sa destination ou son action. Évitez les formulations vagues comme “cliquez ici” ou “en savoir plus”. Mauvais exemple : <p>Pour plus d’informations, <a href= »offre.html »>cliquez ici</a>.</p> Bon exemple : <p>Découvrez le détail de <a href= »offre.html »>notre offre de formation en accessibilité</a>.</p> Ainsi, le lien est compréhensible même lorsqu’il est lu hors contexte par un lecteur d’écran. Précisions cependant qu’il est possible de conserver des intitulés visuels génériques. C’est souvent le cas par exemple pour des intitulés d’articles de blog, ou des fiches produits. On aura souvent “lire plus” ou “voir plus” en guise d’intitulé de lien visible. C’est en effet compliqué (et un peu indigeste) de personnaliser visuellement tous ces liens. Dans ce cas, on ajoute un aria-label qui reprend l’intitulé visible et ajoute du contexte. Ex : aria-label= »lire la suite de l’article sur l’accessibilité ».

2. Éviter les répétitions inutiles

Si plusieurs liens mènent vers la même page, ils doivent idéalement avoir le même intitulé. À l’inverse, si les destinations sont différentes, les intitulés doivent être distincts. Exemple correct : <a href= »contact.html »>Nous contacter</a>   <a href= »aide.html »>Obtenir de l’aide</a> Faites bien attention aux intitulés du type “en savoir plus” ou “découvrir”. Ils sont bien trop génériques.

3. Rendre les liens identifiables visuellement

Les WCAG et le RGAA stipulent qu’il ne faut pas utiliser uniquement la couleur pour identifier un lien. Un simple changement de teinte n’est pas suffisant pour les personnes daltoniennes ou en contraste réduit par exemple.

Si le lien n’est pas de nature évidente, c’est-à-dire surligné, alors ce dernier doit être d’une couleur suffisamment contrastée avec le reste du texte et son fond. Ces contrastes doivent être d’au moins 3:1. De plus, un autre indicateur que la couleur doit être présent au survol et au focus (par exemple mettre le texte en gras).

4. Garantir l’accessibilité au clavier

Un lien doit être accessible avec la touche Tabulation, et son état de focus doit être visible. Cela signifie qu’il doit avoir un contour ou une mise en évidence claire lors du focus clavier. Exemple de style CSS accessible : a:focus {   outline: 3px solid #005fcc;   outline-offset: 2px; }

5. Utiliser des zones cliquables suffisamment larges

Les liens doivent être suffisamment grands pour être activés facilement, y compris par des utilisateurs ayant des difficultés motrices. Le WCAG 2.5.8 recommande une zone cliquable d’au moins 24 x 24 pixels, même s’il s’agit d’un critère AAA, il convient de le respecter le plus possible.

On comprend donc qu’une icône seule comme lien doit avoir un padding ou un margin adapté pour offrir une zone cliquable assez large.

6. Différencier clairement les liens et les boutons

Un lien doit mener à une nouvelle page ou ressource. Un bouton doit lancer une action sur la page en cours (envoyer un formulaire, ouvrir un menu, déclencher un script). Cette distinction sémantique aide les utilisateurs de lecteurs d’écran à comprendre le rôle de chaque élément. Mauvais exemple : <a href= »# » onclick= »ouvrirMenu() »>Ouvrir le menu</a> Ici, l’utilisateur s’attend à être redirigé vers une nouvelle page, mais l’élément déclenche une action sur la page actuelle. Pour un lecteur d’écran, c’est perçu comme un lien, ce qui est trompeur. Bon exemple : <a href= »catalogue.html »>Voir le catalogue</a> Dans ce cas, le lien remplit bien sa fonction : il mène vers une autre page. Si l’action attendue est d’ouvrir un menu ou de soumettre un formulaire, il faut utiliser un <button> et non un <a>.

7. Traiter les images et icônes imbriqués dans les liens

Si un lien est représenté uniquement par une image, l’alt de l’image doit décrire la destination du lien. Exemple : <a href= »accueil.html »>   <img src= »logo.png » alt= »Retour à l’accueil »> </a> Pour une icône SVG décorative accompagnée d’un texte, il est préférable de masquer l’icône avec aria-hidden= »true », et d’ajouter sur le lien contenant l’image une alternative textuelle décrivant la nature de l’action proposée. Exemple :  <a aria-label= »page d’accueil »> <svg aria-hidden= »true »> </a>

8. Prendre en compte les modes d’affichage spécifiques

Comme pour les couleurs, les liens doivent rester visibles et utilisables dans différents modes :

  • Contraste élevé : vérifiez que les liens sont encore distinguables, même si vos couleurs sont remplacées par celles du système.

  • Mode sombre : assurez-vous que la couleur des liens garde un contraste suffisant avec le fond.

  • Lecture hors contexte : testez vos liens dans la liste des liens d’un lecteur d’écran.

Votre checklist pour des liens vraiment accessibles

  • Utiliser uniquement “cliquez ici”, “plus”, “>>” ou “en savoir plus” comme intitulé.

  • Supprimer le soulignement des liens sans offrir d’autre indicateur visuel.

  • Avoir des liens trop proches ou trop petits, rendant le clic difficile.

  • Utiliser des liens pour déclencher des actions qui devraient être confiées à des boutons.

  • Oublier de gérer l’état de focus clavier.

Conclusion

Un lien accessible doit être compréhensible, identifiable et utilisable par tous. Cela implique de choisir un libellé explicite, de garantir un contraste suffisant, de rendre le lien visible au clavier et de respecter la distinction entre lien et bouton.

Ce sont des règles simples, mais elles changent profondément l’expérience utilisateur. Pour une personne aveugle utilisant un lecteur d’écran, passer d’une liste de “cliquez ici” à une liste de liens clairs et explicites rend la navigation infiniment plus fluide. Pour une personne malvoyante, un lien au contraste renforcé et avec un focus visible est un gage de confort.

En respectant ces principes, vous rendez vos contenus accessibles, conformes aux normes internationales et plus agréables à utiliser pour l’ensemble de vos visiteurs. Enfin, vous garantissez une optimisation SEO de vos liens, ce qui est toujours bon à prendre !

Réservez
un appel de découverte

Évaluez l’ampleur de votre besoin en accessibilité numérique, développement ou branding
Obtenez des pistes de réflexion concrètes sur vos points d’amélioration
Bénéficiez des conseils d’experts qui ont une expérience approfondie et une vision stratégique dans le domaine
Réserver un appel de découverte

Gratuit • 45 minutes • En ligne