Lien explicite et accessibilité : rédiger des intitulés de lien conformes au critère WCAG 2.4.4

Ce que dit le critère WCAG 2.4.4 sur les liens explicites

Le texte du critère est court : la fonction de chaque lien peut être déterminée à partir du seul intitulé du lien, ou de l'intitulé du lien combiné à son contexte déterminé par programmation, sauf lorsque la fonction du lien serait ambiguë pour les utilisateurs en général. Le W3C définit la « fonction d'un lien » comme la nature du résultat obtenu en activant ce lien.

Le document « Understanding 2.4.4 » précise l'intention : chaque fois que c'est possible, fournissez un intitulé qui identifie la fonction du lien sans avoir besoin de contexte supplémentaire. Le contexte est admis, mais le W3C recommande, chaque fois que c'est possible, un intitulé compréhensible sans contexte supplémentaire.

Lorsqu'un lien mène à un document ou à une application web, le nom de ce document ou de cette application suffit à décrire sa fonction. Le W3C souligne que ce nom n'est pas obligatoire : d'autres formulations peuvent aussi décrire la fonction du lien.

• Niveau de conformité : A.
• Ce qui est évalué : la fonction du lien, c'est-à-dire ce qui se passe quand on l'active.
• Deux voies admises : l'intitulé seul, ou l'intitulé plus un contexte déterminé par programmation.
• Une exception : les liens dont la fonction serait ambiguë pour les utilisateurs en général.

Pourquoi « cliquez ici » et « en savoir plus » ne suffisent pas toujours

Les technologies d'assistance peuvent présenter à l'utilisateur la liste des liens d'une page. Le W3C rappelle qu'un intitulé aussi parlant que possible aide les personnes qui choisissent un lien depuis cette liste, ainsi que celles qui passent de lien en lien avec la touche Tabulation. Un intitulé parlant aide ces utilisateurs à choisir les liens à suivre sans devoir recourir à des stratégies compliquées pour comprendre la page. À l'inverse, pris isolément, un intitulé générique comme « cliquez ici » ou « en savoir plus » ne renseigne pas, à notre sens, sur la destination.

Les bénéfices décrits par le W3C montrent qui est concerné. Les personnes ayant un handicap moteur peuvent ignorer les liens qui ne les intéressent pas et s'épargner les frappes nécessaires pour visiter un contenu puis revenir. Les personnes ayant des limitations cognitives ne sont pas désorientées par des allers-retours vers des contenus qui ne les intéressent pas. Les personnes ayant un handicap visuel peuvent déterminer la fonction d'un lien en explorant son contexte.

Le W3C ajoute deux bonnes pratiques : des liens qui mènent à la même destination devraient avoir un intitulé cohérent, et des liens aux fonctions et destinations différentes devraient avoir des intitulés différents. Pour les pages d'un même ensemble, la cohérence des liens de même destination relève d'ailleurs d'une exigence, celle du critère 3.2.4 « Consistent Identification ».

Le contexte du lien : ce qui compte vraiment pour le critère 2.4.4

Le critère admet qu'une partie de la description du lien se trouve dans un texte logiquement lié qui lui sert de contexte. Condition posée par le W3C : l'utilisateur doit pouvoir identifier la fonction du lien sans déplacer le focus, c'est-à-dire arriver sur le lien et en savoir plus sans perdre sa place.

Le « contexte de lien déterminé par programmation » désigne l'information supplémentaire qu'un logiciel peut déterminer à partir des relations avec un lien, combinée à l'intitulé du lien, et restituer sous différentes formes. En HTML, dans l'exemple que donne le W3C pour un lien en anglais, il s'agit du texte situé dans le même paragraphe, le même élément de liste ou la même cellule de tableau que le lien, ou dans une cellule d'en-tête associée à la cellule qui contient le lien. Les lecteurs d'écran interprétant la ponctuation, ils peuvent aussi fournir le contexte de la phrase en cours lorsque le focus est sur un lien de cette phrase. Les auteurs peuvent également utiliser une technique ARIA pour associer un autre texte de la page au lien.

Le W3C donne l'exemple d'une page d'actualités qui affiche les premières phrases de chaque article, suivies d'un lien « Read more » (« Lire la suite »). La commande du lecteur d'écran qui lit le paragraphe en cours fournit le contexte nécessaire pour comprendre la fonction du lien.

À l'inverse, l'échec F63 sanctionne un contexte placé uniquement dans un contenu qui n'est pas lié au lien. Le contexte doit donc se trouver dans un contenu lié au lien.

• Placez la description dans la même phrase, le même paragraphe, le même élément de liste ou la même cellule de tableau que le lien.
• Placez le contexte avant le lien : le W3C indique qu'il est alors plus utilisable.
• Si vous devez employer un intitulé ambigu, mettez-le à la fin de la phrase qui décrit la destination, pas au début.
• Un contexte qui suit le lien peut créer de la confusion pour les utilisateurs de lecteurs d'écran qui lisent la page dans l'ordre.

Comment rédiger un intitulé de lien explicite

Premier exemple du W3C : faire porter le lien sur les mots qui décrivent l'information de destination, comme dans la phrase « There was much bloodshed during the Medieval period of history », où le lien porte sur « Medieval period of history » : l'intitulé décrit l'information à laquelle il mène.

Faites concorder l'intitulé du lien et le titre de la page d'arrivée. Le W3C qualifie de bonne pratique le fait qu'ils soient identiques ou très proches, car cela assure une continuité entre le lien activé et la page sur laquelle l'utilisateur arrive. Les titres de page relèvent du critère 2.4.2 « Page Titled ».

Pour un lien qui combine une icône et un texte, le W3C décrit le cas d'une icône de machine à voter accompagnée du texte « Government of Ireland's Commission of Electronic Voting » dans un même lien : l'alternative textuelle de l'icône est vide, puisque le texte décrit déjà la fonction du lien. En revanche, un lien dont le seul contenu est une image sans nom accessible constitue l'échec F89.

Dans l'exemple W3C d'une liste de livres proposés en HTML, en PDF et en mp3, le premier lien de chaque livre est son titre, le deuxième dit « PDF » et le troisième « mp3 », ce qui évite d'entendre trois fois chaque titre. Enfin, le W3C qualifie de bonne pratique le fait qu'un lien vers une version alternative conforme indique, dans son intitulé, que la page de destination est la version la plus accessible ; cette information peut aussi être fournie dans le texte.

• G91 et H30 : fournir un intitulé de lien qui décrit sa fonction.
• G53, H77, H78 et H79 : combiner l'intitulé avec la phrase, l'élément de liste, le paragraphe ou la cellule de tableau qui l'entoure.
• H81 : dans une liste imbriquée, combiner l'intitulé avec l'élément de liste parent.
• ARIA7 et ARIA8 : utiliser aria-labelledby ou aria-label pour préciser la fonction du lien.
• H33 et C7 : compléter l'intitulé avec l'attribut title ou avec une portion de texte masquée en CSS.
• G189 et SCR30 : permettre à l'utilisateur de choisir entre des intitulés courts et longs.

Les cas où un lien peut rester ambigu

L'exception du critère vise les liens dont la fonction ne peut pas être déterminée à partir des informations de la page. Une fonction est « ambiguë pour les utilisateurs en général » lorsque ni le lien ni l'ensemble des informations présentées en même temps que lui ne permettent de la déterminer : les lecteurs sans handicap ne sauraient pas non plus ce que fait le lien avant de l'activer.

Le W3C prend l'exemple de la phrase « One of the notable exports is guava », où le mot « guava » est un lien. Il pourrait mener à une définition, à un graphique des quantités exportées ou à une photographie de personnes récoltant la goyave. Tous les lecteurs sont dans l'incertitude, et la personne handicapée n'est pas désavantagée. Le W3C mentionne aussi, dans une note, les situations où la fonction d'un lien est censée rester inconnue : dans un jeu, des liens « porte n° 1 », « porte n° 2 » et « porte n° 3 » suffisent, car leur but est de créer du suspense pour tous les utilisateurs.

Tout le contexte disponible sur la page qui permet d'interpréter la fonction du lien doit être placé dans l'intitulé ou associé au lien par programmation pour satisfaire le critère.

Vérifier les liens de vos pages

Le W3C associe au critère 2.4.4 trois règles de test : « Link has non-empty accessible name » (le lien a un nom accessible non vide), « Link in context is descriptive » (le lien est descriptif dans son contexte) et « Links with identical accessible names and same context serve equivalent purpose » (des liens de même nom accessible et de même contexte ont une fonction équivalente). Leur utilisation n'est pas obligatoire pour vérifier la conformité, mais ce sont des méthodes de test définies et approuvées.

En pratique, nous vous conseillons de repérer les intitulés génériques ou identiques, puis de vérifier que le contexte déterminé par programmation (phrase, paragraphe, élément de liste, cellule de tableau ou association ARIA) permet d'en comprendre la fonction. Vérifiez aussi que chaque lien image a un nom accessible. Pour démarrer, vous pouvez lancer un test gratuit de vos pages avec Conformly, puis mettre en place une surveillance continue afin de suivre l'évolution de vos contenus.

Questions fréquentes

À lire aussi sur Conformly

• Corriger un lien sans intitulé en HTML
• Critère RGAA 6.1 sur les liens explicites
• Critère RGAA 6.2 sur l'intitulé des liens

Sources

Article appuyé sur les sources officielles citées en fin de page.

• W3C — Comprendre 2.4.4