#2 Contribuer accessible : les bonnes pratiques des intitulés de liens

Nous poursuivons notre série sur les bonnes pratiques pour contribuer de manière accessible. Ce mois-ci, nos experts en accessibilité numérique reviennent sur l’importance des intitulés de liens pour les utilisateurs en situation de handicap.

Retrouvez le premier article de notre série, dédié aux bonnes pratiques des alternatives d’images en accessibilité numérique.

Les impacts des intitulés de liens pour les différents handicaps

Les liens ayant des intitulés qui sont peu ou non pertinents peuvent avoir différents impacts en fonction du handicap de l’utilisateur.

  • Les utilisateurs aveugles ou grands malvoyants peuvent être dans l’incapacité d’utiliser le service ou d’accéder aux informations s’ils ne peuvent pas déterminer la fonction et la destination du lien.
  • Les personnes en situation de handicap moteur et naviguant à la voix peuvent avoir des difficultés à activer les liens si ceux-ci ont des intitulés qui ne sont pas explicites.

Les différents types de liens

Les liens textes

Les liens textes représentent une grande partie des liens qui sont présents dans une page; il s’agit simplement de liens disponibles sur du texte, que ce soit dans les pieds de pages ou des liens dans les textes directement.

Exemple de lien textuel dans un paragraphe :

Texte avec un lien apparaissant souligné

Les liens images

Les liens images sont accessibles uniquement au clic sur une image : ils peuvent mener par exemple vers la page d’accueil d’un site qui est sur son logo, ou vers des sites partenaires avec des logos cliquables.

L’intitulé d’un lien image est contenu dans l’alternative de l’image, il est donc important que l’alternative soit pertinente pour comprendre l’objectif du lien. Contrairement aux images non cliquables, l’alternative ne doit pas fournir l’information portée par l’image (pour en savoir plus, consultez notre article sur comment rédiger des alternatives d’images de qualité) mais elle doit permettre la compréhension de la fonction et de la destination du lien.

Les liens composites

Le dernier type de lien concerne les liens constitués d’une image et d’un texte.

Il s’agit, par exemple, sur une page d’accueil, de liens vers les actualités, ou vers les résultats d’une recherche, dans le but généralement d’augmenter la surface de clic.

Exemple de lien composite sur gironde.fr

Par exemple, sur le site gironde.fr, ce lien composite n’est pas pertinent car il est composé d’une image SVG n’apportant pas d’information, non masquée pour les technologies d’assistance.

Pour les liens composites, l’intitulé du lien correspond à l’intitulé textuel combiné à l’alternative de l’image.

Dans la majorité des cas, il faut que l’alternative de l’image soit vide afin qu’elle ne soit pas restituée. Effectivement, cela pourrait complexifier involontairement et inutilement l’intitulé du lien qui sera restitué à l’utilisateur.

Exemple sur le site d’Angers ou le lien correspond à l’image ainsi qu’à la zone sur la droite : Ici l’image doit avoir une alternative vide.

Pour les quelques cas où l’image apporte une information qui facilite la compréhension de l’objectif du lien, il faut lui donner une alternative qui combinée au texte du lien donnera la totalité de l’information.

Exemple sur le site d’Angers Loire Métropole : Ici l’image apporte l’information du nom du système de paiement. Il faut donc qu’elle soit retranscrite. Dans ce cas, en mettant l’alternative “A’tout” à l’image, l’intitulé qui sera restitué à l’utilisateur sera “A’tout Paiement en ligne”.

Nos conseils pour le contenu des intitulés de liens

L’intitulé du lien est configuré de différentes manières selon son type. Ci-dessous, nous vous proposons quelques conseils pour que vos intitulés de liens soient accessibles!

Choisir un intitulé de lien pertinent

L’intitulé du lien associé à son contexte doit faciliter la compréhension de sa fonction et de sa destination pour l’utilisateur. Le texte environnant et l’intitulé doivent donc apporter les informations nécessaires pour identifier où mène le lien et son utilité.

Les liens sont plus utiles lorsqu’ils permettent directement (en dehors de tout contexte) de comprendre la fonction et la destination en dehors de tout contexte; il faut donc éviter les intitulés de liens composés uniquement de “Cliquez ici”, “Lire la suite”, “En savoir plus”.

Cependant, il n’est pas nécessaire de mettre tout un bloc de texte dans un lien (exemple : un titre d’article +, sa date de parution + les thématiques associées…) pour que celui-ci soit pertinent. Si l’utilisateur a besoin du contexte pour comprendre le lien, il pourra se déplacer avec son lecteur d’écran pour avoir accès à ces informations.

Sur l’accueil de l’ARS pays de la loire, on a par exemple, cet article pour lequel on a un lien sur tout le texte, ce qui veut dire que la totalité de l’information sera vocalisée à l’utilisateur.

Privilégier des intitulés de liens concis

Ce point rejoint le précédent, il n’est pas nécessaire de surcharger l’utilisateur d’informations. Au contraire, cela risque de complexifier l’accès à la bonne information, de démotiver l’utilisateur et de le faire changer de lien.

Il n’y a pas de contrainte formelle sur la taille maximale des intitulés de liens. Il est toutefois conseillé de garder une taille maximale entre 80 et 100 caractères. En effet, une plage Braille affiche entre 40 et 80 caractères et la mémoire d’un lecteur d’écran ne dépasse pas les 100 caractères.

Attention également aux intitulés de lien composés d’URL ; en effet elles sont parfois assez longues, et composées de caractères pas facilement interprétables (ponctuations, dièse, esperluette, etc.), il est donc préférable de reprendre le titre de la page cible comme intitulé de lien, sauf si l’URL est relativement courte comme la page d’accueil d’un site.

Les documents en téléchargement et l’ouverture des liens dans des nouvelles fenêtres

Certains changements dans le contenu de la page Web, s’ils sont effectués sans que l’utilisateur en soit conscient, peuvent désorienter l’utilisateur ne peut pas afficher la page entière simultanément. Par exemple, ouvrir un lien dans une nouvelle fenêtre ou télécharger un document peuvent créer des changements de contexte.

Ce ne sont pas, à proprement parler, des non-conformités vis-à-vis du RGAA, mais des recommandations d’implémentation. Ces recommandations correspondent à des critères qui vont au-delà de l’obligation légale, cependant leur facilité d’implémentation devrait vous permettre de les appliquer facilement.

Lorsque des documents sont en téléchargement, il peut être intéressant d’indiquer dans l’intitulé du lien : le format, la taille et éventuellement la langue du document (si elle est différente de la langue du site).

Lorsqu’un lien s’ouvre dans une nouvelle fenêtre, il est intéressant de l’indiquer à l’utilisateur pour qu’il puisse en être informé et rechercher le nouveau contenu dans un autre onglet.

Ces deux indications peuvent être présentes, directement dans l’intitulé du lien, ou bien via le mécanisme de titre de lien (voir le paragraphe  “pour aller plus loin”).

Pour aller plus loin dans les bonnes pratiques d’intitulé de lien

Pour rendre certains contenus dynamiques de votre page accessibles aux technologies d’assistance, il faut travailler les attributs aria et title directement dans le code source de votre site.

Donner des informations complémentaires avec les infobulles

Dans certains cas, il est intéressant, pour l’expérience utilisateur, d’avoir une infobulle qui s’affiche au  survol du lien par la souris.

Dans le cadre de l’accessibilité, cette information peut être restituée différemment par les lecteurs d’écrans en fonction de leur configuration (seulement l’intitulé, seulement l’infobulle ou la concaténation des deux). Afin d’être certain que tous les utilisateurs aient accès à la même information, il est donc nécessaire que l’information donnée dans l’infobulle reprend au moins l’intitulé du lien avec l’information complémentaire, cette infobulle se traite avec l’attribut title. Dans l’exemple ci-dessus, l’information complémentaire apportée est l’ouverture de la nouvelle fenêtre.

Les attributs aria

Aria-label, aria-labelledby, et aria-describedby, peuvent être utilisés pour compléter l’intitulé donné au lien. Pour en savoir plus sur les attributs aria, consultez cet article.

Pour acquérir une véritable expertise sur le sujet des intitulés de lien :