link

Quand l’utiliser

Presque jamais — utilisez <a href="...">. L’ancre native vous donne le focus, l’activation au clavier via Entrée, l’état « visité », le clic droit « ouvrir dans un nouvel onglet », le glisser-déposer vers les favoris et une vraie URL que l’utilisateur peut partager. role="link" sur un <div> abandonne tout cela.

Les seuls cas légitimes :

• Un système de conception tiers livre un composant « lien » non basé sur une ancre que vous ne pouvez pas remplacer.
• Vous corrigez un <div onclick> inaccessible en attendant qu’un refactoring soit mis en place.

Si vous utilisez role="link", vous devez également :

• Rendre l’élément accessible au clavier avec tabindex="0".
• Gérer keydown pour Enter (les liens ne s’activent PAS avec Espace — c’est un comportement de bouton).
• Fournir un moyen réel pour que l’utilisateur voie l’URL de destination au survol ou au focus, puisqu’il n’y a pas d’attribut href.

Erreurs fréquentes

• <a> sans href. Sans href, l’élément n’est pas dans l’ordre de tabulation et les lecteurs d’écran ne l’annoncent pas comme un lien.
• <a href="#" onclick="..."> utilisé comme bouton. Utilisez plutôt <button> — les liens naviguent, les boutons agissent.
• role="link" s’activant avec Espace. Espace fait défiler la page ; les liens s’activent uniquement avec Entrée.
• Texte de lien du type « cliquer ici » ou « lire la suite ». Les utilisateurs de lecteurs d’écran qui consultent une liste de liens ne voient que le texte du lien — rendez-le descriptif.
• Absence d’aria-current="page" sur le lien représentant la page actuelle dans une navigation.

Exemple

<!-- Recommandé -->
<a href="/toolkit/standards/wcag/">Référence WCAG 2.2</a>

<!-- Seulement quand <a href> est impossible -->
<span
  role="link"
  tabindex="0"
  onclick="location.href='/toolkit/'"
  onkeydown="if (event.key === 'Enter') location.href='/toolkit/'"
>
  Toolkit
</span>