- Met en avant les problèmes liés à l’usage de textes de lien génériques comme « Cliquez ici »
- Dans une logique d’amélioration de l’accessibilité, le texte du lien doit transmettre clairement la signification du contenu
- Impact négatif sur les moteurs de recherche et sur l’expérience des utilisateurs de lecteurs d’écran
- Des formulations de lien claires et reflétant le contexte apportent des bénéfices à la fois aux utilisateurs et aux technologies
- Depuis 2001, un mouvement recommande de bons textes de lien dans le cadre des standards du Web et des principes UX
Introduction
- L’usage de textes de lien génériques comme « Cliquez ici » ou « click here » est depuis longtemps une pratique courante chez les développeurs Web
- Cependant, cette approche présente des inconvénients majeurs en matière d’accessibilité, d’utilisabilité et de SEO
Sens du texte de lien et problèmes posés
- Le texte d’un lien doit fournir des informations permettant à l’utilisateur de prévoir où ce lien mène avant de cliquer
- Lorsqu’on se contente d’écrire « Cliquez ici », le lien existe sans contexte, ce qui entraîne confusion chez l’utilisateur et baisse de l’accessibilité
Impact sur l’accessibilité et l’expérience utilisateur
- Lorsqu’ils parcourent la liste des liens d’une page, les utilisateurs de lecteurs d’écran entendent partout le même libellé « Cliquez ici », ce qui rend l’accès à l’information difficile
- Quand les liens sont rédigés avec des formulations précises porteuses de sens, l’efficacité de l’expérience augmente pour les utilisateurs malvoyants comme pour les autres, dans des contextes variés
Considérations sur l’optimisation pour les moteurs de recherche (SEO)
- Les moteurs de recherche analysent eux aussi le texte des liens pour évaluer la pertinence et la qualité du contenu
- Un texte de lien contenant des mots-clés importants et du contexte a un effet positif sur le classement et la visibilité dans les résultats de recherche
Recommandations pour bien rédiger un texte de lien
- Il est recommandé d’utiliser un texte de lien qui reflète clairement le contexte
- Exemple : « Consulter les dernières directives d’accessibilité »
- Ce principe est souligné de manière continue depuis 2001, avec l’émergence des standards du Web et le renforcement de l’UX
Conclusion
- Utiliser comme lien un texte porteur de sens, plutôt que « Cliquez ici », est un critère indispensable pour le Web d’aujourd’hui comme pour celui de demain
1 commentaires
Avis sur Hacker News
Du point de vue de l’accessibilité, les lecteurs d’écran pour personnes malvoyantes lisent la page de façon linéaire.
Pour sortir de cette lecture linéaire, ils permettent souvent de parcourir séparément des listes d’éléments comme les titres ou les liens, sans le contexte de leur emplacement d’origine.
Si tous les liens disent « click here », on prive en pratique ces utilisateurs d’un accès non linéaire.
Donc quelque chose comme « get Amaya » ou « go to the Amaya website » me semble acceptable.
Et faire en sorte que le bouton de téléchargement sur github.io récupère un exécutable depuis un site comme SourceForge, traité comme un site à malwares, n’est pas une bonne pratique. wxMaxima me vient à l’esprit.
Je ne dis pas qu’il faut changer les outils, mais il devrait exister une façon de visualiser leur fonctionnement pour les gens qui n’iront pas creuser eux-mêmes le fonctionnement des lecteurs d’écran.
Je ne sais toutefois pas dans quelle mesure la première est bien prise en charge par les lecteurs d’écran.
Modification : liens mis à jour de WCAG 2.0 vers 2.2.
Cela dit, plutôt que de laisser seulement « Amaya » comme dans l’exemple de l’article, j’inclurais davantage l’action, par exemple « Get Amaya ».
L’utilisateur peut par exemple passer d’un repère à l’autre, d’un titre à l’autre, ou utiliser les deux ensemble en mode navigation par plan.
L’essentiel est que la navigation avec un lecteur d’écran n’est pas la même chose que la navigation au clavier.
Je ne suis pas du tout d’accord. Leur mauvais exemple, « To download W3C's editor/browser Amaya, click here. », est très clair.
En cliquant sur le lien, on téléchargera directement le fichier ou on ira vers une page de téléchargement.
À l’inverse, « Get Amaya! » ressemble à un lien vers le site web d’Amaya, pas vers une page de téléchargement, donc ce n’est pas efficace pour télécharger.
« Tell me more about Amaya: W3C's free editor/browser that lets you create HTML, SVG, and MathML documents. » n’est pas terrible non plus. Ce n’est pas une phrase sur le téléchargement, et « tell me more » est une injonction alors que ce n’est justement pas le lien.
Les usages conventionnels du Web, comme « To download W3C's editor/browser Amaya, click here. » ou « Download Amaya, the W3C's editor/browser. », sont parfaitement corrects.
L’idée qu’un lien ne devrait pas être un verbe me paraît assez étrange. S’il inclut une action, comme télécharger ou en savoir plus, alors le lien peut évidemment être un verbe.
C’est différent d’un cas où l’on veut en savoir plus sur un sujet, comme avec les liens de référence de Wikipédia.
« click here » indique très clairement que le lien n’est pas un simple lien de référence, mais un lien d’action. Quand je vois « Get Amaya! », j’ai l’impression qu’on ne me dit pas comment obtenir Amaya, mais que « Amaya » est un lien de référence et non un lien de téléchargement.
Même si l’on construit un moteur de recherche, quelle information « click here » apporte-t-il à l’index ?
Je ne suis pas d’accord pour dire que le verbe en soi est le gros problème, mais si le verbe est click et que le complément est here, c’est différent.
Un texte de lien « Click Here to download Amaya » peut passer, mais si le lien se limite littéralement aux deux mots « click here », il devient impossible à distinguer d’autres liens dans de nombreux contextes.
« Download Amaya » peut être un excellent lien. Avoir simplement « Amaya » ou seulement « click here » n’est pas bon, sauf s’il s’agit d’aller vers une page d’information sur Amaya.
Au final, le problème de « click here » est, comme le disent d’autres commentaires, un problème d’accessibilité, mais le message semble s’être pas mal brouillé en le mélangeant avec la question de savoir si le texte du lien reflète précisément sa destination.
aria-describedbypeut aider, mais améliorer le texte à l’intérieur même du lien permet d’éviter d’en avoir besoin.Pour ce qui est des verbes, je suis d’accord.
Le Government Digital Service britannique formule aussi une recommandation similaire dans ses consignes d’accessibilité : https://design.homeoffice.gov.uk/accessibility/links
Ce n’est pas ce qu’il y a de plus joli, mais avec des éléments comme les épaisses bordures noires/jaunes des composants de formulaire, l’accessibilité passe avant le design
Le W3C dit « Get Amaya », « Read more about Amaya », tandis que le Home Office dit « Get Amaya », « Read more about Amaya »
Cette dernière approche paraît beaucoup plus raisonnable, mais utilisée dans un contexte, elle pose d’autres problèmes
Personnellement, je pense que les deux confondent deux cas d’usage différents. Les liens sont souvent utilisés en ligne dans une phrase, alors que les exemples traités par le W3C et le Home Office relèveraient plutôt de boutons placés hors de la phrase, par exemple
[Download],[Documentation]Mais pour le cas d’usage d’un hyperlien dans du texte en ligne, les deux me semblent maladroits
Par exemple, comment faudrait-il corriger « PiPedal is a guitar effects pedal that runs on Raspberry Pi. To download PiPedal, click here. To read the documentation, click here. » ?
Je comprends les objections, mais une correction du type « PiPedal is a guitar effects pedal that runs on Raspberry Pi. Get Pipedal. Read the documentation. » m’est difficilement acceptable. Ce n’est pas idiomatique en anglais
Dans la documentation réelle, j’ai écrit quelque chose comme « To download PiPedal, visit the Download Page. To learn more about Pipedal, view the Documentation. », mais d’expérience, il est souvent très difficile de nominaliser « click here »
C’est encore plus vrai dans une phrase comme « Ubuntu Server installs don't suffer from this problem; but before choosing an Ubuntu Server install, you should read the Ubuntu Server section of the "Installing on Ubuntu" page. »
Du coup, je me demande ce qu’il y a exactement de mal à utiliser « here » comme pronom du référent
Dans ce cas d’usage, le lien se trouve dans une phrase qui fournit tout le contexte nécessaire, donc il se peut qu’il n’y ait pas de vrai problème d’accessibilité
Le premier exemple est aussi une phrase d’accroche sur une page web où la concision est importante
« To download PiPedal, click here. » est-il vraiment un problème d’accessibilité ? Surtout s’il y a juste au-dessus des boutons
[ Download ] [ Documentation ]L’indicateur qui compte vraiment ici, c’est le nombre de personnes qui visitent la page de téléchargement
De ce point de vue, je doute fortement que « To download PiPedal, visit the Download Page. » soit meilleur
Personnellement, je préfère le deuxième exemple qu’ils déconseillent : « To download Amaya, go to the Amaya_Website and get the necessary software. »
Un lien intitulé seulement « Amaya » ne permet pas de savoir s’il s’agit d’un lien interne ou externe, et même si le contexte indique clairement qu’on veut télécharger Amaya, il est difficile de savoir s’il mène directement à un fichier ou à une page de téléchargement
Je ne sais pas si c’est parce que je vieillis, mais j’ai toujours pensé instinctivement qu’un lien pointe vers un nom
Un lien pointe vers un lieu, et ce lieu a un nom, pas un verbe ni un adjectif
Donc un lien vers « mon site web » me va, mais un lien du type « aller sur mon site web » me semble fondamentalement incorrect
Je déteste aussi fortement le ton impératif, donc je n’écris jamais de phrases comme « go to my website » ou « follow this link »
Cela dit, ça devient ambigu quand le lien déclenche une action, comme un téléchargement. Mais si on considère cela comme un nom, « téléchargement » ou « téléchargeur », ça reste un nom
C’est sans doute une querelle d’Internet que je défendrai jusqu’au bout
Les appels à l’action sont une question distincte, mais une page qui ne met en lien que le mot « here » est l’échec manifeste d’un auteur qui n’a pas compris le média hypertexte
« click here » ressemble à une indication de mise en scène laissée par erreur
La plupart des auteurs, lorsqu’ils écrivent, ne pensent pas dans un contexte hypertexte : au lieu d’une syntaxe de lien comme en Markdown, ils prennent par défaut ces indications de mise en scène
Cela me fait penser à un article à propos d’un lien intitulé « I forgot my password »
Je me suis demandé si ce serait mieux d’écrire « click here if... », mais j’ai compris intuitivement que ce n’était pas juste non plus
Ignorer les éléments inutiles d’une page web est une compétence que certaines personnes n’ont pas, et je ne sais pas comment l’enseigner
J’y pense chaque fois que j’aide quelqu’un sans connaissances préalables à utiliser le web. Certains utilisateurs, même si le tout premier élément textuel de la page est « Please enable notifications », y réfléchissent soigneusement avant même de regarder le deuxième élément
D’autant plus que Google Search affiche désormais plusieurs écrans de déchets avant les vrais résultats
Un problème connexe est que certaines personnes ne comprennent pas les différents types de statut épistémique du texte dans une page
Par exemple, face à un lien cliquable « I forgot my password », certains utilisateurs croient qu’il s’agit d’une phrase indiquant qu’ils ont oublié leur mot de passe, et non de l’endroit où cliquer lorsqu’on a oublié son mot de passe
Bien sûr, la mort de la standardisation des UI a rendu ce problème bien pire
https://mstdn.io/@mattskala/113188291223682980
Je me souviens de l’époque où Microsoft avait supprimé beaucoup de boutons de ses UI pour les remplacer par des liens texte vaguement colorés. Après cela, il est devenu bien plus difficile de savoir sur quoi cliquer
Les utilisateurs s’adaptent intuitivement aux machines, et les développeurs s’adaptent aux utilisateurs, ce qui crée une boucle de rétroaction
Autrement dit, comme un très grand nombre de sites web et d’apps comportaient un lien « I forgot my password », il est fort possible que le sens linguistique ait lui aussi changé
Au moins dans ce contexte, la plupart des gens s’adapteront pour comprendre l’intention
Les jeunes générations qui ne connaissent pas d’autre manière de faire peuvent même ne pas considérer cela comme un sujet digne d’attention
Ainsi, même si une convention n’a pas de sens prise isolément, il y a aussi une valeur à maintenir les conventions
Si tous les exemples supposent de manière cohérente qu’on télécharge réellement « Amaya », alors un simple hyperlien Download Amaya serait préférable
Si possible, ce serait bien d’avoir aussi une icône de téléchargement indiquant qu’on va vers un vrai fichier
Parce que cela permet de savoir qu’il ne s’agit pas d’un lien vers une autre page où le vrai bouton de téléchargement est caché entre quatre publicités
Dragan Espenschied (despens) a écrit en 2022 un article sur l’évolution du texte des liens au fil du temps : https://despens.systems/2022/06/button-pushes-you/
Il y relève le passage des appels à l’action vers des textes de boutons qui décrivent l’utilisateur
Du genre : « À la place, ils doivent reconfigurer l’état de l’utilisateur. L’utilisateur doit accepter l’incantation écrite et changer d’attitude avant d’accéder à l’information suivante »
« Get Amaya. », « Tell me more about Amaya. » ne me semblent pas élégants