Aller au contenu principal
Mynto
AccessibiliteRGAA 6.2Niveau ALiens

Lien sans intitulé

Un lien sans texte lisible est inutilisable au clavier ou au lecteur d'écran. C'est le cas des liens icône sans aria-label, des ancres vides ou des images cliquables sans alt. C'est le critère RGAA 6.2, niveau A.

C'est quoi

Le critère RGAA 6.2 demande que chaque lien possède un intitulé : un texte accessible permettant d'identifier sa destination ou sa fonction.

Un lien n'a pas d'intitulé quand :

  • Il contient uniquement une icône SVG ou une image sans texte alternatif.
  • La balise <a> est vide (<a href="..."></a>).
  • Tout le texte visible est masqué avec display:none ou visibility:hidden (invisible pour les lecteurs d'écran également).

Ne pas confondre avec le critère 6.1 (lien sans intitulé explicite), qui s'applique aux liens dont l'intitulé existe mais n'est pas explicite (par exemple : "cliquez ici").

Qui est touché

  • Les personnes aveugles ou malvoyantes qui naviguent à la liste des liens : un lien sans intitulé est annoncé "lien" sans aucun contexte utile.
  • Les utilisateurs qui naviguent au clavier : un lien qui prend le focus sans intitulé visible ni lu est fonctionnellement invisible.

Impact business

Un lien sans intitulé est une impasse de navigation. Pour un utilisateur de lecteur d'écran qui liste les liens de la page pour trouver une action, un lien muet est inexploitable. S'il s'agit d'un bouton de fermeture, d'un lien de partage ou d'un bouton de menu, l'interface devient inutilisable.

Sources des chiffres

Comment le détecter

  • Audit Mynto : le scan détecte les balises <a> sans texte accessible (aucun texte, aria-label ou aria-labelledby, aucun alt d'image).
  • Manuel : navigue à la tabulation et observe la barre de statut du navigateur : vois-tu un texte pour chaque lien actif ?
  • Lecteur d'écran : navigue par la liste des liens (touche K sur NVDA). Chaque lien doit avoir un nom lisible.

Comment corriger

Avant - HTML
<!-- Lien icône sans intitulé -->
<a href="/partager">
  <svg aria-hidden="true" focusable="false">...</svg>
</a>

<!-- Lien de fermeture vide -->
<a href="#" class="close">x</a>
Après - HTML
<!-- Option 1 : aria-label -->
<a href="/partager" aria-label="Partager cet article">
  <svg aria-hidden="true" focusable="false">...</svg>
</a>

<!-- Option 2 : texte masqué visuellement, lu par les lecteurs d'écran -->
<a href="#" class="close">
  <span class="sr-only">Fermer</span>x
</a>

Deux techniques principales :

  1. aria-label directement sur le lien : simple et fiable quand le lien ne contient qu'une icône. Le label remplace entièrement le contenu du lien pour les lecteurs d'écran.

  2. Texte masqué visuellement avec une classe CSS (.sr-only) : le texte est caché à l'écran mais lu par les lecteurs d'écran. Cette technique est préférable si le texte bénéficie aussi à l'indexation.

Dans les deux cas, l'icône SVG doit avoir aria-hidden="true" pour éviter qu'elle soit annoncée en double.

Questions fréquentes

Quelle différence entre RGAA 6.1 et 6.2 ?

6.2 s'applique quand le lien n'a aucun intitulé du tout (lien vide ou icône sans texte alternatif). 6.1 s'applique quand le lien a un intitulé mais qu'il n'est pas explicite : "lire la suite", "cliquez ici", "en savoir plus" en sont des exemples courants.

Un aria-label en anglais est-il acceptable sur un site français ?

Non. L'aria-label doit être dans la langue de la page. Un aria-label= "Close" sur un site français sera prononcé avec la phonologie française, ce qui le rend difficile à comprendre.

L'attribut title sur un lien remplace-t-il l'intitulé ?

Non. L'attribut title n'est pas fiable comme source d'intitulé : il n'est pas lu de façon homogène par tous les lecteurs d'écran et n'est pas accessible au clavier sans survol souris.

À lire aussi

Cette erreur est-elle sur ton site ?

Lance un audit Mynto gratuit. Tu sauras en quelques minutes si ton site est concerné, sur quelles pages, et avec quel impact.