Test 10.6.1

Dans chaque page web, chaque lien texte signalé uniquement par la couleur, et dont la nature n’est pas évidente, vérifie-t-il ces conditions ?

La couleur du lien a un rapport de contraste supérieur ou égal à 3:1 par rapport au texte environnant ;

Le lien dispose d’une indication visuelle au survol autre qu’un changement de couleur ;

Le lien dispose d’une indication visuelle au focus autre qu’un changement de couleur.

Méthodologie 10.6.1

  1. Retrouver dans le document les éléments de type lien (élément <a> ou élément pourvu d’un attribut WAI-ARIA role="link") ;
  2. Pour chaque élément de type lien, s’il peut être confondu avec un texte normal lorsqu’il est signalé uniquement par la couleur, vérifier que le contraste entre la couleur de police du lien et la couleur de police du texte environnant est de 3:1, au moins ;
  3. Cette vérification doit être faite pour les différents états du lien s’ils sont présentés au moyen d’une couleur différente : l’état non visité, l’état visité, l’état activé, l’état au survol et l’état à la prise de focus ;
  4. Si c’est le cas pour chaque élément de type lien, le test est validé.

Tests suivants et précédents au clavier

Test précédent : Maj + ←

Test suivant : Maj + →

Avec ces raccourcis clavier, atteindre

Éléments et attributs

<a> role='link'

Définitions

Contraste

Opposition marquée entre la luminosité d’une couleur de premier plan et d’une couleur d’arrière-plan. Le rapport de contraste est basé sur la différence de luminance relative entre l’arrière-plan et le premier plan selon la règle : (L1 + 0,05) / (L2 + 0,05) où L1 est la luminance relative la plus claire et L2 la luminance relative la plus sombre. La luminosité est calculée selon la formule suivante : L = 0,2126 * R + 0,7152 * G + 0,0722 * B. Où R, G et B sont définis par :

  • Si R sRGB ≤ 0,03928 alors R = R sRGB /12,92 sinon R = ((R sRGB +0,055)/1,055) ^ 2,4 ;
  • Si G sRGB ≤ 0,03928 alors G = G sRGB /12,92 sinon G = ((G sRGB +0,055)/1,055) ^ 2,4 ;
  • Si B sRGB ≤ 0,03928 alors B = B sRGB /12.92 sinon B = ((B sRGB +0,055)/1,055) ^ 2,4.

et R sRGB, G sRGB et B sRGB sont définis par :

  • R sRGB = R8bit/255 ;
  • G sRGB = G8bit/255 ;
  • B sRGB = B8bit/255.

Le caractère « ^ » est l’opérateur de puissance.

Note : la mesure de contraste concerne le texte, le texte en image, le texte et le texte en image dans les animations, le texte de sous-titrage et le texte incrusté dans les vidéos. Pour le texte et le texte en image dans les animations, le texte de sous-titrage et le texte incrusté dans les vidéos, la taille de la police doit être mesurée par rapport à la taille d’affichage par défaut (telle qu’affichée). Les textes présents dans les éléments d’une image ou d’une vidéo (par exemple un écriteau, une affiche…) ne sont pas concernés.

Source (en anglais) : Procédure de calcul de contraste des WCAG.

Lien

En HTML :

  • Balise <a> possédant un attribut href ;
  • Balise possédant un attribut WAI-ARIA role="link" et dont l’action de navigation est prise en charge par un script.

En SVG :

  • Balise <a> possédant un attribut xlink:href en SVG 1.1.
Lien dont la nature n’est pas évidente

Lien qui peut être confondu avec un texte normal lorsqu’il est signalé uniquement par la couleur par certains types d’utilisateurs ne percevant pas ou mal les couleurs. Par exemple, dans ce texte “Nouvelle grève à la SNCF”, si le mot “grève” est un lien signalé uniquement par la couleur, sa nature peut être ignorée par les utilisateurs ne percevant pas la couleur et accédant au contenu CSS activé.

Note : “signalés uniquement par la couleur” signifie que le lien n’est accompagné d’aucun marqueur visuel (icône, soulignement, bordure…). En conséquence, un lien de la même couleur que le texte environnant est concerné par ce critère.

Lien texte

En HTML, lien ne contenant aucun élément enfant de type :

  • Image (balise <img> ou balise ouvrante ayant l’attribut WAI-ARIA role="img") ;
  • Image objet (balise <object>) ;
  • Image bitmap (balise <canvas>) ;
  • Image vectorielle (balise <svg>).