N’utilisez pas de textes de lien comme « Cliquez ici » (2001)

• 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

[GN⁺]

Commentaires Hacker News

• Du point de vue de l’accessibilité, il faut rappeler que les lecteurs d’écran destinés aux utilisateurs malvoyants lisent une page de manière linéaire. Pour sortir de cette structure linéaire, l’utilisateur peut parcourir séparément les titres ou la liste des liens, mais si tous les liens sont libellés « cliquez ici », cet accès non linéaire devient en pratique impossible.

  • Il est aussi souligné que si tous les liens sont affichés simplement comme « Amaya », c’est-à-dire comme de simples noms sans verbe, il devient difficile d’en comprendre le sens. Des formulations comme « get Amaya » ou « go to the Amaya website » paraissent donc tout à fait acceptables. wxMaxima est également cité comme exemple négatif : le bouton de téléchargement est sur github.io, mais le fichier exécutable est en réalité récupéré depuis un site comme sourceforge, avec des risques de malware.
  • Il est suggéré, de façon assez ironique, qu’il faudrait un moyen de permettre aux personnes qui n’ont pas réellement besoin d’outils d’accessibilité de visualiser plus facilement leur fonctionnement. L’idée n’est pas de changer les outils eux-mêmes, mais de réfléchir à des moyens de faire vivre à davantage de gens l’expérience concrète d’un environnement de lecteur d’écran.
  • Il existe déjà plusieurs solutions à ce problème. Sont cités comme références le guide WCAG 2.2 HTML H33 et le guide WCAG 2.2 CSS C7. En revanche, on ne sait pas avec certitude dans quelle mesure la première méthode est réellement bien prise en charge par les lecteurs d’écran.
  • C’est un bon argument. Malgré tout, il reste préférable que le texte du lien inclue une action explicite, comme « Get Amaya » plutôt que simplement « Amaya ».
  • Les lecteurs d’écran proposent plusieurs modes de navigation dans une page. Le déplacement linéaire est simplement la méthode la moins efficace. Les utilisateurs peuvent aller rapidement à l’endroit voulu grâce aux repères, aux titres ou au mode de navigation par plan. Le point important est que la navigation au lecteur d’écran est différente de la navigation au clavier.

• Pour ma part, je trouve que l’exemple « problématique » donné dans l’article,

  Pour télécharger l’éditeur/navigateur Amaya du W3C, cliquez ici.
  est en réalité très intuitif. On peut raisonnablement s’attendre à ce qu’un clic lance directement le téléchargement ou mène à la page de téléchargement.
  En revanche,
  Obtenir Amaya !
  donne plutôt l’impression d’un lien vers la page principale du site, et serait donc moins efficace comme lien de téléchargement.
  Et
  En savoir plus sur Amaya
  n’a rien à voir avec un téléchargement ; le verbe « en savoir plus » n’est pas dans le lien, donc on ne sait pas si le lien sur « Amaya » mène à une landing page ou à une page d’information.
  La convention sur le web a longtemps été plutôt du type :
  Pour télécharger l’éditeur/navigateur Amaya du W3C, cliquez ici
  Télécharger Amaya, éditeur/navigateur du W3C
  Je ne suis pas d’accord avec l’idée qu’il ne faudrait pas mettre de verbe dans le texte du lien. Au contraire, quand un lien implique une action — téléchargement, consultation d’informations, etc. — il devrait clairement contenir un verbe.
  En particulier, « cliquez ici » est très intuitif, car cela signale qu’il s’agit non pas d’un simple lien de référence, mais d’un lien d’action.
  Obtenir Amaya !
  donne davantage l’impression d’un lien de référence que d’un lien expliquant réellement comment obtenir Amaya.

  • Il suffit d’utiliser réellement un lecteur d’écran pour constater que tous les liens deviennent alors une répétition de « cliquez ici ». Ce n’est d’aucune aide. Du point de vue des moteurs de recherche non plus, « cliquez ici » n’apporte aucune information. Le problème n’est pas le verbe en soi, mais le fait que tous les liens sonnent pareil. Une formule comme « Click Here to download Amaya » est acceptable parce qu’elle explicite aussi l’objet, mais « cliquez ici » seul est impossible à distinguer dans de nombreux contextes.
  • Je déteste vraiment les liens « cliquez ici ». Quand je cherche le lien que je veux, j’ai tendance à balayer visuellement tous les textes de liens de la page ; « Télécharger Amaya » ou « Amaya » peuvent convenir pour une page de référence, mais « cliquez ici » n’aide absolument pas.
  • Dans l’exemple concret, tous les liens mènent en réalité à la page d’accueil d’Amaya. Pas à une page de téléchargement, ce qui affaiblit encore le message. La critique est qu’on mélange ici deux sujets différents : le problème d’accessibilité de « cliquez ici » et la question de savoir si le texte du lien reflète fidèlement sa destination.
  • Même en dehors de la question des lecteurs d’écran, le fait d’utiliser un nom clair pour le texte du lien peut présenter un avantage en maintenance. Par exemple, si un lien a été copié-collé par erreur ou s’il est mort, le texte du lien lui-même sert d’indice, ce qui facilite le suivi et la correction. C’est peut-être un point mineur.
  • Aux débuts du web, ce type de liens « cliquez ici » était très courant. Ils ont peu à peu été remplacés par des boutons plus explicites, si bien que des formulations comme « pour annuler cet achat, [cliquez ici] » ou « pour finaliser cet achat, [cliquez ici] » ont progressivement disparu.

• Il est aussi rappelé que le Government Digital Service britannique recommande des règles d’accessibilité similaires ; la documentation officielle est disponible ici.

  • Cette recommandation sert souvent de référence pour concevoir des composants accessibles et des web designs au niveau d’exigence le plus élevé. Cela peut sembler un peu grossier visuellement — grosses bordures noires et jaunes, par exemple — mais il est important de faire passer l’accessibilité avant le design.
  • La méthode recommandée par le Home Office diffère légèrement de celle du W3C. Par exemple :
    W3C :
    Get Amaya
    Read more about Amaya
    Home Office :
    Get Amaya
    Read more about Amaya
    L’approche du Home Office paraît plus raisonnable, mais selon le contexte, elle peut aussi poser d’autres problèmes. Dans les deux cas, il semble souvent plus naturel de résoudre cela avec des boutons hors ligne narrative plutôt qu’avec des hyperliens intégrés dans le texte, par exemple : [Download], [Documentation]. D’après mon expérience, une formulation de ce type fonctionne mieux :
    « PiPedal est un effet guitare qui tourne sur Raspberry Pi. Pour télécharger PiPedal, voir la [page de téléchargement] ; pour lire la documentation, voir [Documentation]. »
    C’est d’ailleurs ainsi que je l’ai écrit dans ma propre documentation.
    J’ai réalisé qu’il est plus difficile qu’on ne le pense de nominaliser « cliquez ici ». Dans certains cas, le contexte fourni directement dans la phrase est suffisant et l’usage de « cliquez ici » ne provoque pas réellement de problème d’accessibilité.
    En particulier, quand les boutons sont situés juste au-dessus (« Download », « Documentation »), je ne suis pas certain qu’il faille absolument les modifier.
    Au final, la vraie métrique est de savoir à quelle fréquence les gens visitent réellement la page de téléchargement.

• Personnellement, je trouve meilleur le deuxième exemple que l’article déconseille (« pour télécharger Amaya, allez sur le site web d’Amaya et récupérez le logiciel voulu »).
  Si l’on met simplement « Amaya » en lien, il n’est pas clair si c’est un lien interne ou externe, ni s’il mène directement à un fichier ou à une page de téléchargement.

  • Préférence pour l’ajout d’une icône indiquant si la destination est externe ou s’il s’agit d’un fichier. Pour un fichier, afficher l’extension peut aussi être une bonne idée.
  • La distinction entre liens internes et externes est déjà bien résolue sur Wikipedia et ailleurs grâce à de petites icônes.

• Peut-être parce que je suis plus âgé, j’ai intuitivement tendance à considérer qu’un lien doit pointer vers un nom — un lieu ou un objet.
  Donc un lien vers « mon site web » me paraît normal, mais des formulations avec verbe comme « aller sur mon site web » me rebutent.
  Je n’aime particulièrement pas les formulations à l’impératif, donc je n’utilise pas des expressions comme « go to my website » ou « follow this link ».

  • Je comprends bien ce point de vue. Dans un cas d’action comme un téléchargement, cela peut être plus ambigu, mais « téléchargement » étant lui-même un nom, cela peut convenir.
  • Pour les tutoriels ou les pages How-to, des formulations à l’impératif peuvent en revanche être tout à fait adaptées.

• Certains considèrent que n’utiliser que « ici » comme texte de lien en ligne révèle un échec fondamental dans la compréhension même de l’écriture hypertexte. « Cliquez ici » ressemble presque à une didascalie. Le problème viendrait du fait que beaucoup d’auteurs n’écrivent pas dans un véritable contexte hypertexte.

• Pour une phrase comme « I forgot my password », on peut imaginer la remplacer par « cliquez ici », mais intuitivement cela sonne faux.
  Avec l’effondrement de certaines conventions UI, les utilisateurs ont de plus en plus de mal à savoir quoi cliquer sur une page et quel texte les représente réellement.
  Il y a accord sur le fait que si « I forgot my password » était un bouton, ce serait bien plus efficace qu’un lien.
  Il est aussi rappelé que lorsque Microsoft a fait disparaître la plupart des boutons au profit de liens à la couleur ambiguë, cela a multiplié les cas où l’on ne savait plus où cliquer.
  (Post de référence : billet Mastodon associé)

• Présentation de l’essai de 2022 de Dragan Espenschied, A history of changing link text.
  Il y est question d’une tendance récente : le texte des liens évolue d’un call-to-action vers des libellés de boutons décrivant l’état de l’utilisateur — sa définition de soi, comme par exemple « connectez-vous ».

• Accord avec la plupart des principes exposés dans l’article, tout en estimant qu’il existe des exceptions appropriées lorsque des verbes ou groupes verbaux comme « download » doivent apparaître explicitement. Dans ce cas, cela ne devrait être utilisé que si le lien mène bien directement au téléchargement, et il faut toujours vérifier que cela reste cohérent avec le contexte.

• Si, comme dans l’exemple, tous les liens déclenchent réellement le téléchargement d’Amaya, alors une forme de lien comme Download Amaya est de loin préférable.
  Si possible, il serait bon d’y ajouter une icône suggérant qu’il s’agit d’un téléchargement. En revanche, il vaut mieux éviter d’envoyer vers une page de téléchargement remplie de boutons publicitaires alors qu’il ne s’agit pas d’un lien direct vers le fichier.