Dans chaque page web, chaque lien a-t-il un intitulé ?
Un lien sans intitulé, c’est un lien silencieux pour les lecteurs d’écran. Quand un utilisateur navigue à la tabulation et tombe sur un lien composé uniquement d’une icône sans texte alternatif, son lecteur d’écran annonce « lien », et rien d’autre. Impossible de savoir où mène ce lien.
Le critère 6.2 est binaire : chaque lien doit contenir un intitulé accessible non vide. Cet intitulé peut être un texte visible, un texte masqué visuellement avec CSS, un attribut aria-label, un aria-labelledby pointant vers du contenu réel, ou l’alternative textuelle (alt) d’une image contenue dans le lien. Ce qui compte, c’est que le nom accessible calculé par le navigateur ne soit pas vide.
Pas d’intitulé, pas de lien utilisable. Cette règle vaut pour tout élément <a href> et pour tout élément portant l’attribut role="link", quelle que soit sa forme visuelle.
Un test pour évaluer la pertinence des intitulés de liens
Présence d'un intitulé non vide sur tout lien
- Identifiez tous les liens de la page : les éléments
<a href>et les éléments avecrole="link". - Pour chaque lien, vérifiez que son contenu produit un intitulé non vide. Un intitulé valide peut être :
- du texte visible entre les balises ouvrante et fermante,
- un texte masqué visuellement via CSS (classe
.sr-onlyou équivalent), - un attribut
aria-labelnon vide sur le lien, - un
aria-labelledbypointant vers un ou plusieurs éléments dont le texte cumulé est non vide, - l’attribut
altd’une image contenue dans le lien.
- Si au moins un lien ne produit aucun intitulé détectable, le test échoue.
Exemples
❌ Non conforme : Lien icône sans texte alternatif
<a href="https://twitter.com/exemple">
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1"/>
</svg>
</a>L’icône SVG est masquée aux technologies d’assistance avec aria-hidden="true", mais aucun texte ne la remplace. Le lecteur d’écran annonce simplement « lien ». L’utilisateur ne sait pas où ce lien mène. C’est la technique F89 des WCAG : supprimer le seul contenu accessible d’un lien.
✅ Conforme : Lien icône avec texte masqué visuellement
<a href="https://twitter.com/exemple">
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1"/>
</svg>
<span class="sr-only">Suivez-nous sur Twitter</span>
</a>Le <span class="sr-only"> fournit un texte lu par les lecteurs d’écran, invisible visuellement. L’utilisateur entend « lien, Suivez-nous sur Twitter » et connaît la destination du lien. Le design visuel n’est pas modifié.
❌ Non conforme : Lien image sans attribut alt
<a href="/accueil">
<img src="logo-exemple.png">
</a>Une image sans alt dans un lien laisse les lecteurs d’écran sans intitulé. Selon le navigateur et le lecteur d’écran, la restitution varie de « logo tiret exemple point png » (nom de fichier) à rien du tout. Dans les deux cas, le lien est inutilisable pour une personne non-voyante.
✅ Conforme : Lien image avec alt servant d’intitulé
<a href="/accueil">
<img src="logo-exemple.png" alt="Accueil - Logo Exemple">
</a>L’attribut alt joue ici le rôle d’intitulé du lien. Le lecteur d’écran annonce « lien, Accueil - Logo Exemple », ce qui indique clairement la destination. Notez que l’alt doit décrire la fonction du lien, pas l’image en elle-même.
Astuces et pièges
⚠️ aria-hidden sur l’unique contenu du lien
C’est l’erreur numéro un en audit de liens iconiques. Un développeur ajoute aria-hidden="true" sur l’icône pour qu’elle ne soit pas lue, mais oublie de fournir un texte de remplacement. Le lien se retrouve vide. La technique de défaillance F89 des WCAG documente exactement ce cas et le marque comme non-conforme.
💡 aria-label directement sur le <a> plutôt qu’un span masqué
Les deux approches sont conformes, mais aria-label sur la balise <a> est plus robuste : <a href="/twitter" aria-label="Suivez-nous sur Twitter">. Elle évite les problèmes CSS potentiels sur le texte masqué (certains frameworks réinitialisent les styles .sr-only) et réduit le balisage superflu.
⚠️ aria-labelledby pointant vers un élément vide ou masqué
aria-labelledby peut référencer plusieurs IDs, ce qui est valide. Mais si tous les éléments ciblés ont un contenu vide ou portent eux-mêmes aria-hidden="true", le nom accessible calculé est vide et le test 6.2.1 échoue. Vérifiez toujours que la chaîne d’IDs produit un texte réel en examinant le panneau Accessibilité du navigateur.
⚠️ Un <a> sans href n’est pas un lien
Un élément <a> sans attribut href est traité comme du texte ordinaire par les navigateurs : il n’est pas focusable, pas inclus dans la liste des liens. Le critère 6.2 ne s’applique pas. En revanche, dès qu’un href est présent, même vide ou égal à "#", l’élément devient un lien et doit avoir un intitulé.
💡 Utiliser le panneau Accessibilité du navigateur pour vérifier le nom calculé
Firefox et Chrome affichent le « nom accessible » calculé dans leur panneau Accessibilité. Sélectionnez le lien dans l’inspecteur DOM, cherchez le champ « Name » : s’il est vide, le test 6.2.1 échoue. C’est plus fiable que la lecture du code source, car cela tient compte de toutes les techniques ARIA combinées.
Questions fréquentes
Comment rendre conforme au RGAA 6.2 un lien composé uniquement d'une icône de police ?
Non, sauf si un intitulé est fourni par un autre moyen. Une icône insérée via pseudo-élément CSS ou via un caractère Unicode sans texte alternatif produit un lien vide. La solution la plus simple : ajoutez aria-label directement sur le <a>, ou insérez un <span class="sr-only"> avec le texte décrivant la destination.
En quoi les critères RGAA 6.1 et 6.2 diffèrent-ils sur les intitulés de liens ?
Le critère 6.2 vérifie qu’un intitulé existe (non vide). Le critère 6.1 vérifie que cet intitulé est pertinent et explicite. Un lien intitulé « Cliquez ici » est conforme au 6.2 (il a un intitulé) mais échoue au 6.1 (l’intitulé n’est pas suffisamment explicite). En audit, 6.2 est donc un prérequis à 6.1.
Comment identifier efficacement les liens sans intitulé accessible sur une page web ?
Includdy surligne automatiquement les liens vides. En console navigateur, document.querySelectorAll('a[href]') suivi d’un filtre sur el.accessibleName (ou via la propriété AOM expérimentale) peut repérer les cas. Complétez toujours avec un test manuel au clavier et au lecteur d’écran, car certains cas d’aria-labelledby vers des éléments vides échappent aux outils automatiques.
Quel impact a alt="" sur une image dans un lien selon le critère RGAA 6.2 ?
Non. Si l’image porte alt="", elle est ignorée par les lecteurs d’écran et ne fournit aucun intitulé au lien. Le résultat est identique à un lien vide. Soit l’image doit recevoir un alt décrivant la destination du lien, soit un texte masqué ou un aria-label doit compléter le lien par un autre moyen.