Créer des liens texte accessibles
![]() |
|
Imprimer
|
Envoyer
|
Partager
|
Avertissement : la version originale de ce document est Web Links and Hypertext : Link Text and Appearance. Cette traduction en français a été réalisée par Ideose dans le cadre d’un accord entre WebAIM et Ideose.
Note : consulter la page Documents sur l’accessibilité du Web pour obtenir la liste de tous les documents déjà traduits. D’autres ressources sur l’accessibilité du Web sont également listées dans le Portail du numérique accessible.
Sommaire
- Page 1 : Introduction
- Vous êtes sur la Page 2 : Créer des liens texte accessibles
- Page 3 : Créer des liens HyperTexte accessibles
Liens texte
Evitez les liens qui sont des phrases sans information
Comme indiqué dans la page 1, les liens sont plus utiles quand ils ont du sens hors de leur contexte. Les auteurs devraient éviter les phrases non informatives utilisées comme liens comme :
- cliquer ici
- ici
- plus
- lire plus
- lien vers [destination du lien]
- info
En fait, l’expression « cliquer ici » est inutile même si elle précède une expression plus significative. Par exemple, un lien « cliquer ici pour accéder à la météo du jour » peut être réduit à « la météo du jour ». Dans certains cas, il peut avoir du sens de faire précéder un lien avec « plus » ou « en savoir plus sur » (par exemple « plus sur le réchauffement de la planète »), mais si ces mots supplémentaires peuvent être évités, il est préférable de ne pas les mettre (par exemple, « réchauffement climatique » peut selon le contexte transmettre le même sens que « plus sur le réchauffement climatique »).
Longueur des liens
Les liens longs
Quelle est la longueur maximale autorisée d’un lien texte ? C’est une bonne question mais il n’y a pas de réponse bien établie. La réponse la plus adaptée est que le lien doit être suffisamment long pour transmettre l’objectif du lien et pas plus. L’imprécision de cette réponse ouvre la porte aux interprétations, mais ce n’est peut-être pas une mauvaise chose. Les auteurs de contenu doivent avoir la liberté de donner un sens à leur contenu d’une manière qui fait sens pour eux. Cependant, en règle générale, les liens doivent être aussi concis que possible, sans sacrifier leur pertinence.
Certains auteurs créent des liens avec des phrases entières, des paragraphes entiers ou même plusieurs paragraphes. Ces liens longs sont certainement inutiles, et ne sont pas conviviaux pour les utilisateurs de lecteurs d’écran. Rappelez-vous que les utilisateurs de lecteurs d’écran ne peuvent pas apprécier visuellement la longueur des liens. Ils doivent écouter l’ensemble du texte. Certains utilisateurs de lecteurs d’écran sont frustrés de lire de longs liens texte et passent au lien suivant s’ils ne peuvent pas comprendre le but du lien après les premiers mots. Les auteurs n’ont aucun contrôle sur le comportement d’un tel utilisateur, mais ils ont le contrôle sur certaines des raisons qui peuvent conduire des utilisateurs à ressentir de la frustration. Courts, concis, les liens sont moins susceptibles de faire obstacle aux utilisateurs de lecteurs d’écran que des liens longs et imprécis.
Les liens courts
Quelle est la longueur minimale d’un lien texte ? C’est une autre bonne question mais elle est aussi sans réponse. Dans la plupart des cas, les liens doivent être des mots ou des phrases. Dans certains cas, cependant, cela a du sens de mettre un lien sur un seul caractère, une lettre de l’alphabet ou un chiffre. Par exemple, un index alphabétique peut utiliser chaque lettre de l’alphabet comme lien.
Le danger d’utiliser de simples caractères comme liens – ou en utilisant toute sorte de petit lien (comme une image de 10 pixels par 10 pixels) – est que certains utilisateurs éprouvent de la difficulté à cliquer sur une région aussi petite. Quelqu’un avec une paralysie cérébrale, par exemple, peut pouvoir utiliser ses mains pour manipuler une souris, mais peut avoir de la difficulté à effectuer des mouvements précis et à contrôler ses muscles qui sont nécessaires pour cliquer sur un petit lien. Cette personne peut être amenée à cliquer deux ou trois fois pour atteindre la cible, et peut finir par cliquer sur le mauvais lien, ce qui l’obligerait à appuyer sur le bouton dans le navigateur et à essayer de nouveau.
Les utilisateurs ont un certain contrôle sur la largeur du lien. Ils peuvent acheter un agrandisseur d’écran comme ZoomText ou MAGic, ce qui permet d’agrandir les lien. Les utilisateurs peuvent aussi agrandir les polices dans leur navigateur sans l’aide d’un agrandisseur d’écran. Le navigateur Opera permet aux utilisateurs d’agrandir l’ensemble de la page Web. En ce sens, les petits liens ne sont pas les pires problèmes d’accessibilité auxquels doivent faire face les utilisateurs. Dans le même temps, les auteurs peuvent limiter les dommages potentiels en augmentant la taille des petits liens, en augmentant la taille de la police des liens avec un seul caractère, ou en élargissant la zone du lien en incluant des espaces son sécables dans le lien.
Exemple
Les espaces non sécables (présents dans le code de la manière suivante : ) entourent les lettres « A » et « B » dans cet exemple. Ils aisent à rendre le lien plus large pour les personnes qui ont des difficultés à cliquer sur les petites zones.
Les liens URL
Les adresses Web ou les URLs présentent 2 types de défi :
- lisibilité
- longueur
Lisibilité des URLs
Le premier défi est que les URLs ne sont pas toujours lisibles par l’homme ou facilement écoutables via un lecteur d’écran. Beaucoup d’URLs contiennent des combinaisons de chiffres, de lettres, de tirets, de tirets de soulignement et d’autres caractères qui ont un sens pour les scripts et les bases de données, mais qui ont peu ou pas de sens pour la moyenne des personnes. Dans de nombreux cas, il est logique d’utiliser le texte lisible par l’homme au lieu de l’URL. Le lien lisible par l’homme Constructing Accessible Web Sites est plus convivial que le lien composé de 108 caractères – plein de chiffres, de barres obliques – qui est un texte pas très lisible par l’homme. (http://www.amazon.com/exec/obidos/ASIN/
1590591488/qid=1116957951/sr=2-
1/ref=pd_bbs_b_2_1/103-5755258-8204633).
Cela signifie-t-il que les URLs ne devraient jamais être utilisées comme liens ? Non. Si l’URL est relativement courte, il y n’a probablement aucun problème à utiliser l’URL comme lien texte. Le point clé est de prendre en considération les utilisateurs de lecteurs d’écran qui doivent écouter le lien URL qui est plus long et moins intelligible.
Longueur des URLs
Le deuxième problème est que certaines URLs sont assez longues et que certains navigateurs refusent de passer à la ligne les longues URLs et laissent les liens URL s’étendre à droite au-delà de la zone visible du navigateur. Ces longues URLs sont généralement générées par des sites Web avec bases de données ou des applications Web qui transfèrent un certain nombre de variables par le biais de l’adresse du site Web. Le lien ci-dessus pour le livre sur Amazon.com en est un parfait exemple. En fait, le long lien texte a été modifié par l’ajout de deux retours à la ligne (<br>) dans le milieu de l’URL, afin de lui permettre de passer à la ligne suivante. Les navigateurs basés sur Mozilla comme Firefox ou Netscape ne permettent pas aux longues URLs de passer à la ligne à moins que l’auteur n’introduise un retour à la ligne quelque part.
La largeur de l’écran ci-dessous serait de plus de 2000 pixels (l’équivalent de deux moniteurs). Imaginez d’afficher un lien aussi long sur une page Web. Les utilisateurs devraient naviguer longtemps horizontalement pour lire la totalité du lien.

Pire encore, imaginez écouter ce lien avec un lecteur d’écran ! Presque personne n’aurait la patience d’écouter tout ce contenu indéchiffrable. Le lien ci-dessus pourrait être raccourci à « stock de photos de mouettes californiennes », car le lien mène à une page avec un stock de photos de mouettes californiennes.
Alternative textuelle pour les images utilisées comme liens
Quand les images sont utilisées comme des liens, le alt texte doit exprimer la fonction du lien texte. Comme dans le texte en lien, le alt des images en liens n’a pas besoin d’informer les utilisateurs que ce lien est un lien car ils le savent déjà. Un dilemme intéressant cependant est de décider s’il est important de décrire les caractéristiques visuelles de l’image dans le alt le texte, puisque l’objet du altt texte est de remplacer l’image dans les cas où les utilisateurs ne peuvent pas la voir. Dans la plupart des cas, les caractéristiques visuelles de l’image sont moins importantes que la destination du lien.
Exemple
L’image dans cet exemple pourrait être décrite comme un « objet aligné horizontalement, en forme de pilule, un peu en trois dimensions, avec du bleu royal sur la décoloration et rouge sur le bas, avec des couleurs légèrement plus foncées sur le côté gauche et un peu plus lavées sur le côté droit, avec le mot ‘produits’ écrit en caractères gras Arial texte blanc sur le dessus de l’objet, ce qui suggère que l’objet est un lien vers une liste de produits ou d’explications ».
La description est tout à fait exacte mais tout à fait inutile. Le but de l’image dans ce cas est d’établir un lien vers la section des produits d’un site Web. Le alt texte devrait davantage tenir compte de l’objectif de l’image plutôt que de son aspect visuel. La plupart des utilisateurs de lecteur d’écran ne veulent pas savoir à quoi ressemble le bouton, en particulier si la description est longue. Un alt texte « Produits » fera très bien l’affaire.
L’apparence des liens
Les liens doivent ressembler à des liens et inversement rien d’autre ne le devrait. Les utilisateurs sont frustrés quand ils essaient de cliquer sur du texte ou sur des images qui ressemblent à des liens mais qui ne le sont pas. Ils seront également frustrés s’ils doivent déplacer leur souris sur la page pour essayer de découvrir les liens qui ne ressemblent pas à des liens.
Le soulignement
Les navigateurs soulignent les liens HyperTexte par défaut. Il est possible de supprimer le soulignement en utilisant des CSS, mais c’est une mauvaise idée la plupart du temps. Les utilisateurs sont habitués à voir des liens soulignés. Ils peuvent ou ne peuvent pas être en mesure de savoir quel texte est un lien si la convention de soulignement n’est pas respectée.
Exemple
Quels mots ou phrases dans la capture d’écran ci-dessous sont des liens et lesquels ne le sont pas ?
Il s’avère que tous les texte présents sont des liens. Les utilisateurs peuvent cliquer sur les textes en noir ou en bleu. Ce type de conceptions graphiques demande aux utilisateurs de deviner ou de trouver par élimination ou par chance. Il est préférable de souligner les liens dans le contenu principal d’une page Web.
Comme pour la plupart des affirmations, il y a des exceptions. Bien que les utilisateurs soient habitués à voir des liens soulignés dans le contenu principal, ils sont aussi habitués à voir les fonctions principales de navigation dans les onglets (souvent créées sous forme d’images plutôt qu’en texte) non soulignées. En fait, il est extrêmement difficile de trouver un site majeur qui souligne les liens principaux de navigation.
Exemples
Plusieurs sites Web soulignent les liens dans le contenu principal mais pas dans le menu de navigation comme montré dans les captures d’écran suivantes.

Le site IBM utilise du texte. Fait intéressant, quand les utilisateurs survolent le texte avec la souris, le trait de soulignement apparaît comme pour rassurer les utilisateurs que ce sont vraiment des liens. La plupart des utilisateurs ont déjà compris que ce sont des liens, parce qu’ils ressemblent à ceux de la navigation principale du site. Néanmoins, l’apparition soudaine du soulignement peut être utile pour certaines personnes.

Le site aux 10,000 villages utilise des images au lieu du texte. Le texte n’apparaît jamais souligné.
La navigation principale du site Web de Macromedia est construite en Flash. Le texte n’est jamais souligné.
Les effets de survol et de focus
Beaucoup de sites Web ont mis en œuvre des effets de survol et de focus. Ces effets servent un but esthétique (les effets sont « cool » et artistiques). Ils servent également à l’accessibilité dans la mesure où ils aident les utilisateurs à savoir que la souris ou le clavier sont sur un lien particulier et que le lien est actif.

Dans la plupart des cas, les effets correspondent à des mise en évidence sur ou sous le lien texte.

Dans d’autres cas, les couleurs du lien texte changent.

Cette technique n’est pas limitée à la navigation principale du site. Elle peut aussi être utilisée sur les liens du contenu principal.

Pour rendre cet effet indépendant des périphériques, il est nécessaire de veiller à ce qu’il puisse être activé par la souris et par le clavier. En CSS, cela signifie qu’il faut utiliser à la fois les classes :hover et :focus. La classe :active peut aussi être utilisée.
Exemple
La CSS suivante transformera l’arrière-plan d’un lien en jaune clair et le lien texte en marron quand l’utilisateur le survolera avec sa souris, tabulera au clavier vers lui ou cliquera sur le lien soit avec la souris, soit avec la touche Entrée.
a:focus,
a:active
{
background-color:#ffffcc;
color:#990000;
}
Liens commerciaux
WebAIM est une initiative de :
![]()
Copyright 1999-2009 WebAIM



































S'abonner au blog Ideose