RGAA Lab

Composants accessibles

Les liens

« En savoir plus » se comprend dans sa phrase, et nulle part ailleurs. Un lecteur d'écran liste les liens hors de leur texte : c'est cette liste qui juge l'intitulé. Démo, code, critères RGAA.

3 critères RGAA en jeu

Essayez-les

Notre extension audite les 106 critères du RGAA. En savoir plus

Notre extension audite les 106 critères du RGAA. En savoir plus sur l'extension

Notre extension audite les 106 critères du RGAA. Découvrir l'extension

Les trois phrases sont identiques ; les trois liens ne le sont pas. Sorti de sa phrase, le premier ne mène nulle part de connu.

Cette démo existe aussi en page autonome.

Pourquoi hors contexte

Un lecteur d’écran sait afficher la liste des liens d’une page, et c’est un mode de navigation courant : on cherche où aller avant de lire. Dans cette liste, les liens sont sortis de leur phrase.

Une page qui répète « En savoir plus » six fois y produit six lignes identiques, et six destinations différentes. Le lecteur doit revenir dans le texte pour chacune — exactement le détour que la liste devait éviter.

C’est pourquoi le référentiel juge l’intitulé hors de son contexte, et n’accepte le contexte que dans des limites étroites : le paragraphe, la liste, le titre, ou la cellule de tableau qui portent le lien. Ni la section, ni le bloc voisin, ni « ce qui l’entoure ».

L’erreur courante

<!-- À ne pas faire : trois liens, un seul intitulé -->
<p>Notre extension audite les 106 critères. <a href="/extension">En savoir plus</a></p>
<p>Nos formations sont sur mesure. <a href="/formation">En savoir plus</a></p>
<p>Nous auditons votre site. <a href="/audit">En savoir plus</a></p>

Trois variantes de la même faute, aussi répandues :

  • Le lien vide — une icône seule, sans texte ni alternative. Le lecteur annonce alors l’URL, ou « lien » tout court.
  • L’URL comme intitulé — https://rgaa.dev/criteres/1.1 se restitue caractère par caractère chez certains lecteurs. C’est long et illisible.
  • « Cliquez ici » — qui suppose un clic, alors qu’on active un lien au clavier, à la voix ou au doigt.

Le code, pas à pas

1. Écrire la destination

La réparation la plus solide ne demande aucun attribut :

<p>Notre extension audite les 106 critères. <a href="/extension">Découvrir l'extension</a></p>

L’intitulé dit où il mène, pour tout le monde et du même coup. Quand la mise en page impose « En savoir plus » répété, c’est souvent la mise en page qu’il faut discuter.

2. Compléter sans changer ce qui se voit

Quand l’intitulé visible doit rester court, on lui ajoute un complément que seuls les lecteurs d’écran restituent :

<a href="/extension">
	En savoir plus<span class="sr-only"> sur l'extension</span>
</a>
/* Retiré de l'affichage, gardé pour la restitution. */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

Un piège à connaître : display: none et visibility: hidden retirent le texte des deux — il ne serait pas restitué non plus. La technique ci-dessus est la seule qui masque à l’œil sans masquer au lecteur.

aria-label fait le même travail, mais il remplace l’intitulé au lieu de le compléter : le texte visible disparaît alors de la restitution, et l’utilisateur qui commande à la voix ne peut plus dire « clique sur En savoir plus ». Préférez le complément masqué.

3. Le lien qui n’est qu’une image

<a href="/">
	<img src="/logo.svg" alt="RGAA Lab — accueil" />
</a>

L’alternative de l’image devient l’intitulé du lien : elle décrit la destination, pas l’image. « Logo » ne dit rien ; « RGAA Lab — accueil » dit tout.

4. Annoncer la nouvelle fenêtre

<a href="https://example.org" target="_blank" rel="noopener noreferrer">
	Le référentiel officiel<span class="sr-only"> (nouvelle fenêtre)</span>
	<span aria-hidden="true">↗</span>
</a>

La flèche prévient l’œil, le texte masqué prévient le lecteur — et elle est masquée précisément parce que le texte dit déjà la même chose.

C’est une bonne pratique, pas une obligation du référentiel. Le critère 13.2 vise autre chose : la fenêtre qui s’ouvre sans action de l’utilisateur, la fenêtre surgissante au chargement. Un lien que l’on clique est une action, et il ne tombe pas sous ce critère. Annoncer reste recommandé — le changement de contexte surprend, et rien ne coûte moins qu’un mot de plus dans l’intitulé.

5. Se distinguer autrement que par la couleur

a {
	color: var(--action);
	text-decoration: underline;
	text-underline-offset: 4px;
}

Dans un paragraphe, un lien qui ne se signale que par sa couleur est invisible pour qui ne distingue pas cette couleur. Le soulignement règle la question sans condition. Si vous le retirez, il faut alors un rapport de contraste d’au moins 3:1 entre le lien et le texte voisin, et un autre repère au survol comme à la prise de focus — trois conditions au lieu d’une.

Au clavier

ToucheEffet
TabPasse au lien suivant. Le focus doit y être visible : ne supprimez jamais l’outline sans le remplacer.
EntréeActive le lien. Espace ne l’active pas — c’est un bouton, pas un lien.
Liste des liensMode dédié du lecteur d’écran : c’est là que se juge un intitulé.

Un lien est un <a href>. Un <span onclick> ne prend pas le focus, ne répond pas à Entrée, n’apparaît pas dans la liste des liens et ne s’ouvre pas dans un nouvel onglet — quatre comportements gratuits, perdus d’un coup.

Ce que le lecteur d’écran restitue

En arrivant sur le lien : l’intitulé puis la nature — « Découvrir l’extension, lien ». Avec un complément masqué : « En savoir plus sur l’extension, lien ».

Dans la liste des liens, seul l’intitulé subsiste. C’est le test qui décide, et vous pouvez le faire sans lecteur d’écran : écrivez vos intitulés à la suite, sans le reste de la page. Si la liste est ambiguë pour vous, elle l’est pour tout le monde.

Checklist

  • L’intitulé dit la destination, sans le texte qui l’entoure.
  • Pas deux liens de même intitulé vers des destinations différentes.
  • Complément masqué plutôt qu’aria-label, qui écrase le texte visible.
  • Un lien-image porte une alternative qui décrit la destination.
  • La nouvelle fenêtre est annoncée en texte, pas seulement par une icône.
  • Le lien dans un texte se distingue autrement que par la seule couleur.

Les critères RGAA en jeu

  • Critère 6.1 — Liens explicites

    L'intitulé doit se comprendre seul, ou avec son contexte de lien — que le référentiel limite à quatre conteneurs. « En savoir plus » isolé dans un paragraphe qui ne le porte pas échoue ici.

  • Critère 6.2 — Intitulé de lien

    Tout lien doit avoir un intitulé : un lien vide, ou qui n'enveloppe qu'une image sans alternative, n'a aucun nom accessible.

  • Critère 10.6 — Visibilité des liens dans le texte

    Un lien au milieu d'un texte doit se distinguer autrement que par la couleur seule — soulignement, ou un rapport de contraste suffisant avec le texte qui l'entoure.

Vérifiez votre composant avec l'extension

Pour aller plus loin

Sources