Créer des ressources accessibles : Liens

Les liens accessibles aident tous les utilisateurs (en particulier ceux qui utilisent des lecteurs d’écran ou la navigation au clavier) à comprendre où un lien les mènera et comment interagir avec lui. Cet article présente les meilleures pratiques pour rédiger un texte de lien clair, utiliser un contexte significatif et éviter les phrases vagues telles que “cliquez ici”. Apprenez à rendre vos liens plus utilisables, plus informatifs et plus conformes aux normes d’accessibilité.

Exigences

• Les liens doivent être sémantiquement désignés comme tels.
• L’idéal est d’utiliser un élément <a> avec une valeur href valide. La définition de role="link" (et l’ajout de tous les autres aspects de la fonctionnalité des liens) peut être acceptable dans de rares cas problématiques.
• Un lien doit comporter un texte qu’un programme peut reconnaître, conformément à l’algorithme de calcul des noms accessibles.
• Les spécificités de ces informations sont définies par d’autres spécifications, telles que WAI-ARIA, ou par les normes de la plate-forme concernée.
• L’objectif de chaque lien doit être clair et se distinguer des autres liens de la même page, soit à partir du texte du lien lui-même (de préférence), soit à partir du contexte environnant du lien.
• Il est conseillé d’éviter les noms de liens tels que :
  • En savoir plus,
  • En savoir plus,
  • Cliquez ici pour plus de détails.
• Les liens menant aux mêmes destinations doivent systématiquement utiliser le même texte (ou un texte très similaire) sur toutes les pages du site web
• Les liens doivent pouvoir être mis en évidence au clavier sans qu’il soit nécessaire de synchroniser précisément chaque frappe.
• En outre, les liens doivent être activés à l’aide de la touche Entrée/Retour.
• L’ordre de navigation des éléments focalisables (liens, éléments de formulaire, etc.) doit être logique et intuitif.
• L’ordre des éléments doit être logique.
• Les liens doivent se distinguer visuellement du texte environnant sans lien.
• Les liens ne doivent pas reposer uniquement sur la couleur pour se différencier du texte environnant, à moins qu’il n’y ait un contraste suffisant entre eux et le texte.
• Lorsque le lien est survolé ou qu’il est mis en évidence, un indice visuel supplémentaire (comme un soulignement ou un contour) doit apparaître.
• Les liens doivent présenter un rapport de contraste de 4,5 à 1 (pour un texte de petite taille) ou de 3 à 1 (pour un texte de grande taille) par rapport à leur arrière-plan.
• Tous les liens doivent afficher un indicateur visuel de mise au point lorsqu’ils sont mis au point.
• Le contraste de tous les indicateurs visuels de mise au point par rapport à l’arrière-plan doit être d’au moins 3 à 1.
• Les utilisateurs doivent avoir la possibilité de sauter les blocs de contenu répétés sur plusieurs pages web (par exemple, une longue liste de filtres sur un site web de commerce électronique qui est un élément standard de nombreuses pages).
  • Le lien “sauter” doit être le premier élément focalisable de la page.
  • Le lien “skip” doit toujours être visible ou mis en évidence par le clavier.
  • les liens “sauter”, les points de repère (par exemple, <nav>, <main>, etc.) et la table des matières de la page sont autant de méthodes acceptables pour satisfaire à l’exigence des WCAG 2.4.1 qui consiste à permettre aux utilisateurs de contourner les blocs de contenu. L’idéal est d’intégrer toutes ces techniques dans la conception lorsque cela est possible.
• Une table des matières pour la page peut être placée en haut du contenu ou dans l’en-tête.
• Idéalement, les liens de la table des matières devraient correspondre à la structure des titres du contenu de la page.

Exemples d’application

	Le panneau des filtres s’ouvre à la demande de l’utilisateur, ce qui lui permet de ne pas lire le contenu de cette colonne de déchets à l’aide d’un lecteur d’écran.
	NON: L’exemple suivant utilise incorrectement tabindex pour spécifier un ordre de tabulation alternatif. Si cette liste est parcourue à l’aide de la touche de tabulation, la liste est parcourue dans l’ordre suivant : page d’accueil, chapitre 3, chapitre 2, chapitre 1, ce qui ne respecte pas l’ordre du contenu.
	Lorsque les champs de texte sont mis en évidence, une barre verticale s’affiche dans le champ, indiquant que l’utilisateur peut insérer du texte, ou tout le texte est mis en évidence, indiquant que l’utilisateur peut taper par-dessus le texte.
	NON : Dans cet exemple, lors de l’utilisation d’un clavier, le bouton d’appel à l’action est ignoré (ou même tout l’élément qui donne à l’utilisateur des informations cruciales).
	NON : Tous les éléments marqués en rouge se ressemblent, mais View pricing est un lien. Le reste du texte bleu n’est que du surlignage. Cela signifie que les liens ne se distinguent pas visuellement du texte environnant qui n’est pas un lien. NON : En même temps, les éléments marqués en vert provoquent une action, mais ils ressemblent à du texte normal. Cela signifie que les liens ne se distinguent pas visuellement du texte environnant qui n’est pas un lien.