Les liens de votre site indiquent-ils clairement leur destination ?
Critère officiel 6.1 — Chaque lien est-il explicite (hors cas particuliers) ?
Pourquoi c'est important
Une personne aveugle peut afficher la liste de tous les liens d'une page pour se repérer rapidement. Si cette liste contient dix fois « Cliquez ici » ou « En savoir plus », elle ne peut pas distinguer un lien d'un autre et doit les ouvrir un par un pour comprendre où chacun mène.
Exemples concrets
Ce qui est conforme
La page des actualités présente des liens explicites : « Lire le compte-rendu du conseil municipal du 15 février 2025 », « Télécharger l'arrêté de voirie n°2025-014 (PDF, 180 Ko) ». Chaque lien est compréhensible sans lire le reste de la page.
Ce qui pose problème
La même page présente trois liens « En savoir plus » à la suite. Le logiciel de lecture les annonce : « Lien : En savoir plus. Lien : En savoir plus. Lien : En savoir plus. » — impossible de savoir lequel concerne le conseil municipal, l'arrêté ou l'appel à projets.
Comment agir
Pour chaque lien, posez-vous la question : si ce texte était le seul élément que j'entende, saurais-je exactement où ce lien m'emmène ? Dans WordPress, remplacez « Cliquez ici », « En savoir plus » et « PDF » par des phrases complètes : « Lire la délibération du 15 mars 2025 », « Télécharger le budget primitif 2025 (PDF, 420 Ko) ». Le contexte doit être dans le texte du lien lui-même.
Règles clés
- L'intitulé du lien doit être compréhensible hors contexte visuel — tester en lisant uniquement le texte du lien.
- Le contexte RGAA autorisé : titre de section (<h1>–<h6>), liste englobante, cellule de tableau, paragraphe précédant directement le lien.
- Un lien image (sans texte visible) doit avoir un aria-label ou un alt sur l'img qui décrit la destination.
- Le nom accessible (calculé par le navigateur) doit contenir l'intitulé visible — sinon violation de 2.5.3 (Label in Name).
- Toujours préciser le format et le poids pour les liens de téléchargement : "Télécharger le rapport annuel (PDF, 2 Mo)".
Erreurs fréquentes
- Liens génériques répétés : "Lire la suite", "En savoir plus", "Cliquez ici", "Ici", "Plus d'infos"
- Lien image (icône) sans alt ni aria-label
- Lien dont l'intitulé visible est différent du nom accessible ARIA (viole 2.5.3)
- URL brute utilisée comme texte de lien (ex. : "https://exemple.fr/page-tres-longue-789")
- Lien 'Télécharger' sans préciser le document ni le format
- Texte du lien qui répète le titre déjà présent juste au-dessus, sans ajout d'information
- Option vide (<option></option>) dans une liste déroulante : absence de texte visible ET accessible pour cette option de formulaire
Exemples de code
lien générique répété
✗ Non conforme<article>
<h2>Rapport annuel 2024</h2>
<p>Découvrez nos résultats...</p>
<a href="/rapport-2024">Lire la suite</a>
</article>Hors contexte (liste de liens), "Lire la suite" est vide de sens. Répété sur d'autres articles, il devient indiscernable.
lien générique répété
✓ Conforme<!-- Option 1 : intitulé explicite -->
<a href="/rapport-2024">Lire le rapport annuel 2024</a>
<!-- Option 2 : aria-label si l'intitulé visible doit rester court -->
<a href="/rapport-2024" aria-label="Lire la suite : Rapport annuel 2024">Lire la suite</a>
<!-- Option 3 : texte masqué visuellement -->
<a href="/rapport-2024">Lire la suite
<span class="sr-only"> du rapport annuel 2024</span>
</a>Les trois approches sont valides RGAA. L'option 1 est la plus robuste. L'option 2 respecte 2.5.3 car l'intitulé visible "Lire la suite" est contenu dans l'aria-label. L'option 3 est la plus légère à implémenter dans un CMS.
lien icône sans alternative
✗ Non conforme<a href="/panier">
<svg aria-hidden="true"><use href="#icon-cart"/></svg>
</a>Le SVG est masqué aux AT (aria-hidden) mais le lien n'a aucun nom accessible. Restitué comme "lien" vide.
lien icône sans alternative
✓ Conforme<a href="/panier" aria-label="Mon panier">
<svg aria-hidden="true"><use href="#icon-cart"/></svg>
</a>aria-label sur le lien fournit le nom accessible. Le SVG décoratif reste masqué aux AT.
lien téléchargement
✗ Non conforme<a href="/docs/ra2024.pdf">Télécharger</a>"Télécharger" sans précision sur le document, le format ni la taille.
lien téléchargement
✓ Conforme<a href="/docs/ra2024.pdf">Télécharger le rapport annuel 2024 (PDF, 2,4 Mo)</a>L'intitulé indique le document, le format et le poids — informations utiles avant d'activer le lien.
Référence WCAG : 1.1.1, 2.4.4, 2.5.3