Liens accessibles : intitulé, distinction visuelle et cible

Les liens hypertextes constituent la base de la navigation web. Pourtant, ils sont souvent sources de confusion pour les utilisateurs de technologies d'assistance. Ce guide vous montre comment créer des liens parfaitement accessibles, conformes aux WCAG 2.2 et au RGAA 4.1.

L'importance des liens accessibles

Les lecteurs d'écran permettent aux utilisateurs de naviguer par liste de liens. Dans ce mode, seul le texte du lien est annoncé, sans le contexte environnant. Un lien "cliquez ici" devient alors totalement incompréhensible.

Le critère WCAG 2.4.4 (niveau A) exige que l'objectif de chaque lien soit déterminable par le texte du lien seul, ou par le texte du lien combiné avec son contexte programmatique. Le niveau AAA (WCAG 2.4.9) va plus loin en exigeant que le texte du lien seul suffise.

Rédiger des textes de liens efficaces

Principes fondamentaux

Le texte d'un lien doit répondre à la question "Où vais-je atterrir ?". Évitez absolument les formulations génériques comme "cliquez ici", "en savoir plus", "lire la suite" ou "ici".

Mauvais exemple :

Pour connaître nos tarifs, cliquez ici.

Bon exemple :

Consultez notre grille tarifaire.

Liens sur des phrases complètes

Évitez d'englober des phrases entières dans un lien. Ciblez plutôt les mots-clés descriptifs.

À éviter :

[Nous proposons des formations en accessibilité numérique pour tous les profils.]

Préférable :

Nous proposons des [formations en accessibilité numérique] pour tous les profils.

Liens sur des images

Lorsqu'un lien contient une image, le texte alternatif de l'image devient le texte du lien. Ce texte doit donc décrire la destination, pas l'image elle-même.

<!-- Mauvais -->
<a href="/accueil">
  <img src="logo.png" alt="Logo de l'entreprise">
</a>

<!-- Bon -->
<a href="/accueil">
  <img src="logo.png" alt="Accueil - RGAA Checker">
</a>

Distinction visuelle des liens

Au-delà de la couleur

Le WCAG 1.4.1 interdit l'utilisation de la couleur comme seul moyen de transmettre une information. Pour les liens dans le texte, cela signifie qu'ils doivent être distinguables autrement que par leur couleur.

La méthode la plus fiable reste le soulignement. Si vous choisissez de ne pas souligner les liens au repos, les WCAG exigent que le ratio de contraste entre le lien et le texte environnant soit d'au moins 3:1, et qu'un indicateur non-coloriel apparaisse au survol et au focus.

Focus visible

Tout lien doit avoir un indicateur de focus clairement visible. Le navigateur fournit un style par défaut, mais vous pouvez le personnaliser tant qu'il reste perceptible.

a:focus {
  outline: 3px solid #0066cc;
  outline-offset: 2px;
}

a:focus:not(:focus-visible) {
  outline: none;
}

a:focus-visible {
  outline: 3px solid #0066cc;
  outline-offset: 2px;
}

Liens ouvrant une nouvelle fenêtre

Informer l'utilisateur

L'ouverture d'une nouvelle fenêtre ou d'un nouvel onglet peut désorienter les utilisateurs, particulièrement ceux utilisant des lecteurs d'écran ou des agrandisseurs. Prévenir l'utilisateur est essentiel.

<!-- Solution avec texte visible -->
<a href="https://example.com" target="_blank">
  Documentation externe (nouvelle fenêtre)
</a>

<!-- Solution avec texte masqué pour lecteurs d'écran -->
<a href="https://example.com" target="_blank">
  Documentation externe
  <span class="sr-only">(ouvre une nouvelle fenêtre)</span>
</a>

<!-- Solution avec icône accessible -->
<a href="https://example.com" target="_blank">
  Documentation externe
  <svg aria-label="(ouvre une nouvelle fenêtre)" role="img">
    <!-- icône nouvelle fenêtre -->
  </svg>
</a>

Limiter l'usage de target="_blank"

Avant d'ouvrir un lien dans une nouvelle fenêtre, demandez-vous si c'est vraiment nécessaire. L'utilisateur peut toujours choisir d'ouvrir un lien dans un nouvel onglet via clic droit ou raccourci clavier. Réservez cette pratique aux situations où l'utilisateur risque de perdre son travail en quittant la page.

Liens de téléchargement

Indiquer le type et la taille

Pour les liens vers des fichiers téléchargeables, indiquez le format et si possible la taille du fichier.

<a href="/docs/rapport-2025.pdf" download>
  Rapport annuel 2025 (PDF, 2.4 Mo)
</a>

Cette information aide les utilisateurs à anticiper ce qui va se passer et à évaluer si leur connexion permettra un téléchargement rapide.

Liens adjacents vers la même destination

Fusionner les liens

Lorsqu'une image et un texte pointent vers la même destination, englobez-les dans un seul lien. Cela évite la redondance pour les utilisateurs de lecteurs d'écran.

<!-- Mauvais : deux liens consécutifs -->
<a href="/article"><img src="photo.jpg" alt="Photo de l'article"></a>
<a href="/article">Titre de l'article</a>

<!-- Bon : un seul lien -->
<a href="/article">
  <img src="photo.jpg" alt="">
  Titre de l'article
</a>

Notez que l'image a un alt vide car le texte du lien fournit déjà la description.

Liens d'évitement

Permettre de sauter au contenu principal

Les liens d'évitement permettent aux utilisateurs de clavier et de lecteurs d'écran de naviguer plus efficacement en sautant les éléments répétitifs comme la navigation.

<body>
  <a href="#main" class="skip-link">Aller au contenu principal</a>
  <header>...</header>
  <nav>...</nav>
  <main id="main" tabindex="-1">
    <!-- Contenu principal -->
  </main>
</body>

Le lien peut être visuellement masqué par défaut et apparaître au focus.

.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  position: static;
  left: auto;
}

Taille et espacement des zones cliquables

Un texte de lien impeccable ne sert à rien si la cible est trop petite pour être atteinte. C'est le point qui pénalise en premier les utilisateurs à mobilité réduite, au pointeur adapté ou au suivi oculaire.

/* Une zone cliquable qui dépasse la hauteur du texte */
nav a {
  display: inline-block;
  padding: 12px 16px;
  min-block-size: 44px;
}

/* Deux liens collés provoquent des activations accidentelles */
.liens-utiles a + a { margin-inline-start: 16px; }

Attention à la source de l'exigence. Le RGAA 4.1.2 ne fixe aucune taille minimale de cible : cette règle relève du critère WCAG 2.5.8, ajouté par les WCAG 2.2 et absent du référentiel français. Nous détaillons ce décalage dans notre article sur les évolutions du RGAA face aux WCAG. Rien n'empêche de l'appliquer, mais aucun audit RGAA ne vous le réclamera aujourd'hui.

Tests et vérification

Liste de contrôle

Avant de valider vos liens, vérifiez ces points :

1. Le texte de chaque lien est-il compréhensible hors contexte ?
2. Les liens sont-ils visuellement distinguables du texte normal ?
3. Le focus est-il visible sur tous les liens ?
4. Les liens ouvrant une nouvelle fenêtre sont-ils signalés ?
5. Les fichiers téléchargeables indiquent-ils leur format et taille ?
6. Les liens adjacents identiques sont-ils fusionnés ?

Outils de test

Analysez votre page pour repérer les intitulés génériques et les problèmes de contraste sur les liens. Le scan remonte les anomalies structurelles ; la pertinence d'un intitulé, elle, se tranche à l'œil. Pour une vérification complète, testez avec un lecteur d'écran en utilisant la navigation par liste de liens.

Pour savoir sur quel critère RGAA rattacher chaque défaut constaté (contraste ou intitulé), notre article sur l'intitulé de lien en audit donne la grille. Les critères concernés sont détaillés dans les fiches 6.1 et 6.2.

Conclusion

Des liens bien conçus améliorent l'expérience de tous les utilisateurs, pas seulement ceux utilisant des technologies d'assistance. Un texte de lien descriptif facilite le scan visuel de la page et contribue également au référencement naturel. En appliquant ces principes, vous créez une navigation plus intuitive et conforme aux standards d'accessibilité.

En cas d'hésitation entre un lien et un bouton sur un élément précis, notre guide de choix bouton ou lien tranche à partir de ce que l'élément fait réellement.