Dans son article du 12 juillet dernier (Les hyperliens dans une page Web doivent-ils avoir une longueur maximale ?), Denis Boudreau traite entre autres de l’identification des hyperliens dans le contenu d’une page. J’aimerais aujourd’hui apporter des précisions à propos de ce sujet intéressant.

Le critère de succès 2.4.9 de WCAG 2.0 couvert par Denis n’est pas le seul à considérer à l’égard du souci. Voici ce qu’indique le critère de succès de niveau A 1.4.1 Utilisation de la couleur :

« la couleur n’est pas utilisée comme la seule façon de véhiculer de l’information, d’indiquer une action, de solliciter une réponse ou de distinguer un élément visuel. (Niveau A) »

En surface, j’aurais donc cru que la couleur d’un lien, à elle seule, ne serait pas suffisante pour distinguer celui-ci de son contenu avoisinant.

En creusant un peu plus loin et en consultant les techniques suffisantes pour être conforme à ce critère de succès (Sufficient Techniques for 1.4.1), ainsi qu’en considérant le fait que chacun des points numérotés est à lui seul suffisant pour respecter le critère en question (tel que précisé), je reviens sur ma conclusion précoce.

La technique G183

La couleur d’un lien est suffisante pour distinguer celui-ci de son contenu à condition que le contraste de couleur de ce lien soit d’un ratio de luminosité d’au moins 3:1, en comparaison avec son contenu textuel avoisinant. Cependant, pour que cette technique soit considérée conforme, les états de survol et de focus du lien en question doivent présenter un élément visuel supplémentaire (le soulignement, par exemple).

C’est bien ce que nous informe la technique G183 du W3C (G183 : Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them). On y apporte tout de même une importante précision :

« While using this technique is sufficient to meet this success criteria [1.4.1], it is not the preferred technique to differentiate link text. This is because links that use the relative luminance of color alone may not be obvious to people with black/white color blindness. If there are not a large number of links in the block of text, underlines are recommended for links. »

Je suis d’accord avec cette précision. Bien que la technique soit suffisante pour répondre aux besoins du critère, la technique préférée demeure le soulignement. Pour ma part, je continuerai de souligner mes liens !

Pour ceux et celles qui désirent appliquer la technique G183 pour la distinction des liens à l’intérieur de contenu, n’oubliez pas que les règles de contraste de couleur entre un texte et son arrière-plan s’appliquent également (Règle 1.4.3 Contraste (minimum) ou Règle 1.4.6 Contraste (amélioré)). Donc, en plus de maintenir un contraste de luminosité d’au moins 3:1 entre un lien et son entourage textuel, le lien doit présenter un contraste de luminosité d’au moins 4,5:1 (niveau AA) ou 7:1 (niveau AAA) avec son arrière-plan.

Exemples

Pour visualiser des exemples reliés à l’application de la technique G183 ainsi que pour obtenir une liste des couleurs de liens « légales » à utiliser à l’intérieur de texte noir sur fond blanc, consultez la référence du W3C : Links with a 3:1 contrast ratio with surrounding text.