Liens accessibles : stratégies pour une navigation inclusive

Les liens sont les artères du web. Mal conçus, ils deviennent des obstacles pour les utilisateurs de technologies d'assistance. Ce guide présente les stratégies essentielles pour créer des liens véritablement accessibles.

Les exigences WCAG pour les liens

2.4.4 Fonction du lien (dans le contexte) - Niveau A

La fonction de chaque lien doit pouvoir être déterminée par le texte du lien seul, ou par le texte du lien accompagné de son contexte programmatique.

2.4.9 Fonction du lien (texte seul) - Niveau AAA

La fonction de chaque lien doit pouvoir être déterminée par le texte du lien seul.

1.4.1 Utilisation de la couleur - Niveau A

La couleur ne doit pas être le seul moyen visuel de transmettre une information (comme identifier un lien).

Rédiger des textes de liens efficaces

Évitez les liens génériques

Les utilisateurs de lecteurs d'écran peuvent naviguer de lien en lien. Entendre une liste de "cliquez ici" n'aide personne.

<!-- MAUVAIS -->
<p>
  Pour en savoir plus sur l'accessibilité, <a href="/guide">cliquez ici</a>.
</p>
<p>
  Nos services sont décrits <a href="/services">ici</a>.
  <a href="/contact">En savoir plus</a>.
</p>

<!-- BON -->
<p>
  <a href="/guide">Consultez notre guide de l'accessibilité</a>.
</p>
<p>
  Découvrez <a href="/services">nos services d'audit RGAA</a>.
  <a href="/contact">Contactez notre équipe</a>.
</p>

Soyez descriptif mais concis

Le texte du lien doit décrire la destination ou l'action, sans être trop long.

<!-- TROP VAGUE -->
<a href="/rapport.pdf">Télécharger</a>

<!-- TROP LONG -->
<a href="/rapport.pdf">
  Télécharger le rapport annuel complet d'accessibilité 2026
  qui contient toutes les statistiques et recommandations
</a>

<!-- ÉQUILIBRÉ -->
<a href="/rapport.pdf">
  Télécharger le rapport d'accessibilité 2026 (PDF, 2.4 Mo)
</a>

Évitez la redondance

Le lecteur d'écran annonce déjà qu'un élément est un lien.

<!-- REDONDANT -->
<a href="/services">Lien vers nos services</a>

<!-- CORRECT -->
<a href="/services">Nos services</a>

Distinction visuelle des liens

Pas seulement la couleur

Le critère WCAG 1.4.1 interdit d'utiliser la couleur comme seul moyen de distinguer les liens.

/* INSUFFISANT : couleur seule */
a {
  color: #0066cc;
  text-decoration: none;
}

/* ACCESSIBLE : couleur + soulignement */
a {
  color: #0066cc;
  text-decoration: underline;
}

/* ALTERNATIVE : couleur + autre indice */
a {
  color: #0066cc;
  text-decoration: none;
  font-weight: bold;
  border-bottom: 2px solid currentColor;
}

Alternatives acceptables au soulignement

Si vous retirez le soulignement, ajoutez un autre indicateur visuel :

• Bordure inférieure
• Fond de couleur
• Icône adjacente
• Style de police différent (gras, italique)

Et assurez-vous d'un contraste de 3:1 entre le lien et le texte environnant.

États interactifs

/* État par défaut */
a {
  color: #0066cc;
  text-decoration: underline;
}

/* Survol */
a:hover {
  color: #004499;
  text-decoration: none;
  background-color: #e6f0ff;
}

/* Focus (critique pour clavier) */
a:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

/* Visité */
a:visited {
  color: #551a8b;
}

[!NOTE] Ne supprimez jamais l'indicateur de focus sans le remplacer. C'est essentiel pour les utilisateurs clavier.

Liens ouvrant une nouvelle fenêtre

Pourquoi c'est problématique

L'ouverture d'un nouvel onglet peut désorienter :

• Les utilisateurs de lecteurs d'écran perdent le contexte
• Le bouton "retour" ne fonctionne plus
• Certains utilisateurs ne remarquent pas le changement

Bonnes pratiques

<!-- Indiquer visuellement et programmatiquement -->
<a href="https://example.com" target="_blank" rel="noopener">
  Site externe (s'ouvre dans un nouvel onglet)
  <span class="sr-only">(ouvre un nouvel onglet)</span>
</a>

<!-- Avec icône -->
<a href="https://example.com" target="_blank" rel="noopener">
  Site externe
  <svg aria-hidden="true" class="icone-externe">...</svg>
  <span class="sr-only">(ouvre un nouvel onglet)</span>
</a>

[!TIP] Privilégiez l'ouverture dans le même onglet. Réservez target="_blank" aux cas où l'utilisateur remplit un formulaire et aurait besoin de consulter une référence externe.

Liens vers des fichiers

Indiquer le type et la taille

<!-- Fichier PDF -->
<a href="/guide.pdf">
  Guide de l'accessibilité (PDF, 1.2 Mo)
</a>

<!-- Fichier Excel -->
<a href="/donnees.xlsx">
  Données de conformité (Excel, 450 Ko)
</a>

<!-- Avec icône -->
<a href="/guide.pdf" class="lien-fichier">
  <svg aria-hidden="true" class="icone-pdf">...</svg>
  Guide de l'accessibilité (PDF, 1.2 Mo)
</a>

Liens-images

Le alt décrit la destination, pas l'image

Quand une image est un lien, le texte alternatif doit décrire la destination du lien.

<!-- INCORRECT : alt décrit l'image -->
<a href="/">
  <img src="logo.png" alt="Logo de l'entreprise avec un cercle bleu">
</a>

<!-- CORRECT : alt décrit la destination -->
<a href="/">
  <img src="logo.png" alt="RGAA Checker - Accueil">
</a>

Lien avec texte et image

<!-- L'image est décorative car le texte suffit -->
<a href="/services">
  <img src="icone-services.svg" alt="">
  Nos services
</a>

<!-- Alternative avec aria-hidden -->
<a href="/services">
  <img src="icone-services.svg" aria-hidden="true">
  Nos services
</a>

Taille et espacement des liens

Zones cliquables adéquates

Les liens doivent avoir une zone cliquable suffisante, surtout sur mobile.

/* Liens dans une navigation */
nav a {
  display: inline-block;
  padding: 12px 16px;
  min-height: 44px;
  min-width: 44px;
}

/* Espacement entre liens */
nav ul {
  display: flex;
  gap: 8px;
}

Liens trop proches

/* Éviter les liens collés */
.liens-utiles a + a {
  margin-left: 16px;
}

Vérifier vos liens

Test avec lecteur d'écran

1. Activez NVDA ou VoiceOver
2. Naviguez de lien en lien (touches Tab ou L)
3. Écoutez : chaque lien a-t-il un sens hors contexte ?

Outils automatisés

• RGAA Checker : détecte les liens vides ou non descriptifs
• Extension WAVE : signale les textes de liens problématiques
• axe DevTools : vérification des rôles et états

Checklist rapide

• Le texte du lien décrit-il la destination ?
• Le lien est-il visuellement distinct (pas seulement par la couleur) ?
• Le focus est-il visible ?
• Les liens vers nouvelle fenêtre sont-ils indiqués ?
• Les fichiers téléchargeables indiquent-ils type et taille ?
• Les liens-images ont-ils un alt décrivant la destination ?

Conclusion

Des liens bien conçus améliorent l'expérience de tous les utilisateurs, pas seulement ceux utilisant des technologies d'assistance. En adoptant des textes descriptifs, une distinction visuelle claire et des indications pour les comportements spéciaux, vous rendez votre navigation véritablement inclusive.

Testez vos liens avec RGAA Checker pour identifier les problèmes courants et consultez notre guide de la navigation clavier pour une expérience complète.