Back to the original French page Read this page in Italian by Google Translation Read this page in Portuguese by Google Translation Read this page in English by Google Translation Read this page in German by Google Translation Read this page in Spanish by Google Translation Read this page in Arabic by Google Translation Read this page in Hebrew by Google Translation

Créer des liens texte accessibles

Aller au début du contenu sans utiliser la barre Consultation et Partage Mode d'emploi de la barre Consultation et Partage Ecoutez le contenu principal de cette page
Imprimer Imprimer le contenu principal de cette page Envoyer Envoyer par courriel le contenu principal de cette page Partager Partager cette page sur TwitThis Partager cette page sur Facebook Partager cette page sur Wikio Partager cette page sur Google Partager cette page sur LinkedIn Partager cette page sur Digg Partager cette page sur del.icio.us Partager cette page sur Netvibes

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.

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 »).

Les liens URL

Les adresses Web ou les URLs présentent 2 types de défi :

  1. lisibilité
  2. 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.

Un exemple d'un très long lien URL avec plus de 300 caractères (à partir d'une image de recherche sur google.com)

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.

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 ?

Du texte en noir en haut indique 'solutions', puis il y a 11 mots en bleu; aucun n'est souligné.

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.

La navigation principale sur le site IBM.com est du texte sans soulignement

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.

7 images sur le côté gauche de la page sont utilisées comme navigation sur le site Web aux 10,000 villages.

Le site aux 10,000 villages utilise des images au lieu du texte. Le texte n’apparaît jamais souligné.

Une zone horizontale en 3 dimensions sert d'arrière-plan pour la navigation principale du site Web Macromedia.com.

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:hover,
a:focus,
a:active
{
background-color:#ffffcc;
color:#990000;
}

WebAIM est une initiative de :
Center for Persons with Disabilities (CPD) Utah State University

Copyright 1999-2009 WebAIM

Haut de la page