Bien rédiger ses liens

Un lien hypertexte ou hyperlien permet au lecteur d'atteindre une autre page du site ou un autre site évalué comme pertinent par un rédacteur. Ils font partie des éléments mis en valeur dans un texte, au même titre que les mots clés ou les titres d’une page. Ils permettent de construire le schéma d’une page  (comme nous le décrivions dans l'article sur la rédaction des titres) et d'aérer un contenu.

Il existe différents types de liens, dont voici quelques exemples :

  • Les liens composant un menu (ou une arborescence de site),
  • Les liens de contenu proposé au sein d’un texte,
  • Les liens « pour en savoir plus », proposés en périphérie du contenu principal,
  • Etc.

Il est important de bien choisir vos intitulés et vos liens car s’ils ne sont pas suffisamment clairs ou mal choisi, vos utilisateurs vont vite être perdus. Dans cet article, nous vous donnerons quelques règles simples pour vous aider à les rédiger et pour savoir comment utiliser l'attribut title.

Recommandations

D’une manière générale, voici un ensemble de recommandations pour tous les types de liens.

  • Éviter tous les liens ayant pour intitulé « cliquez-ici » ou « dans cette page » car il est possible de préciser ces liens pour apporter une information ciblée.
  • Un intitulé de lien correspond à une destination.
  • Un lien doit être suffisamment concis (80 caractères est un maximum recommandé). Par exemple, les liens sur les textes de lois doivent être résumés par un titre et peuvent être complétés par un paragraphe à la suite.
  • Lorsque plusieurs liens sont énumérés à la suite, veiller à laisser un espace entre chaque lien et, si possible, des caractères : « , »,« : », etc. ne contenant pas de design de lien pour que l’utilisateur puisse faire la distinction entre les liens.
  • Dans le contenu, ne jamais proposer un lien qui pointe sur la page en cours d’affichage.
  • Être vigilant pour les liens génériques du type : « télécharger » et « lire plus » ou « lire la suite ». Vous pouvez vérifier/clarifier ce type de lien avec une mise en contexte clair ET un title.

Par exemple, dans cet exemple disponible sur la page d'accueil du guichet, le lien « lire la suite… » n’est pas clair à lui seul. Cependant il est le seul lien de l’actualité nommé« bénéficier de la Luxembourg Card », le contexte permet donc de comprendre sa destination.

Pour s'assurer de sa compréhension hors contexte, il est recommandé de compléter l’intitulé par un « title » contenant le titre de l'actualité. Ce qui donne: "Lire la suite de bénéficier de la luxembourg Card" ou "bénéficier de la luxembourg Card". Le lien est donc significatif dans cet exemple. (Nous détaillons les règles d'utilisation des titles dans un paragraphe spécifique plus bas dans l'article.)

Les liens de menu

Pour ce qui est des liens composant une arborescence, le choix des intitulés est fait lors de l’étape de réalisation de l'arborescence. Notre équipe d'ergonomes est disponible tout au long de cette phase pour vous y aider. Afin de vérifier que vos intitulés sont compréhensibles par votre cible, nous pouvons mettre en place un tri de carte ou un tri de carte inversé auprès de vos cibles.

De plus, lors de l’Assurance Qualité, nous vérifions avec vous que les intitulés respectent les critères basiques d'une arborescence.

Les images- liens

Une image-lien n’a pas d’intitulé, ce rôle sera pris par son alternative. C’est pourquoi il est nécessaire de, toujours, donner un alt à une image–lien. Dans ce cas, il est également recommandé de donner un title au lien. Ainsi, quel que soit le navigateur ou le lecteur d'écran, l'utilisateur aura l'information de manière claire.

Les documents

Pour les liens pointant vers des documents, l’utilisateur doit savoir qu’il va ouvrir un document, son poids et son type. Cela lui donnera des indications supplémentaires sur le contenu. Et il pourra ainsi déterminer si la machine qu’il utilise sera en mesure de le lire et le temps approximatif de téléchargement. Le type et le poids du document peuvent être précisés dans l’intitulé ou, si cela n'est pas possible, dans le title du lien. Le poids et le type (surtout s’il s’agit d’un document autre que PDF) est une information très précieuse en smartphone ou tablette.

Vers une nouvelle fenêtre

Lorsqu’un lien ouvre une nouvelle fenêtre, l’utilisateur doit le savoir avant de cliquer dessus.

En effet, l’ouverture dans une nouvelle fenêtre peut être déroutante pour certains utilisateurs (en particulier des aveugles) surtout s’il n’est pas prévenu.

Astuce NPS

Avec NPS, la gestion des nouvelles fenêtres se fait de manière automatique: une icône apparaît  et le title est complété par un ("nouvelle fenetre") pour tous les liens externes et tous les liens où il est précisé "new windows"

Une bonne utilisation du title

A retenir

  • Si possible, renseigner un title que si cela est nécessaire.
  • Title= intitulé du lien + information supplémentaire.
  • Le title n'est pas lisible pour les supports tactiles.

Un title apparaît dans une info-bulle au survol de la souris. Il permet de préciser la destination d'un lien. Ils apparaissent "à la demande".

L’intitulé d’un lien peut être complété par un titre de paragraphe ou la phrase dans lequel il se trouve. Ces éléments forment ce qu'on appelle un contexte. Si cela est possible, il est préférable de rendre vos liens significatifs hors contexte, le title pourra vous y aider. Il ne faut cependant pas oublier qu'un title ne sera pas disponible pour les écrans tactiles.

Par ailleurs, de nombreux profils de personnes handicapés (aveugle, malvoyant, personne avec handicap moteur ou cognitif) utilisent une fonction leur permettant de lister tous les liens de la page. Cela leur permet de naviguer plus rapidement entre les pages.

Comme nous pouvons le voir dans ce listing (généré sur cette page), les liens sont sortis de leur contexte, il n’y a aucune phrase ou titre permettant de clarifier un lien. C’est pourquoi, il est d’autant plus important que ces intitulés soient clairs, le title pouvant préciser l’information.

Pour ce type d'outils, deux règles ont été instaurées:

  • Le title doit reprendre ce qui est disponible dans l’intitulé + donner une information supplémentaire (Le title ne doit surtout pas donner moins d'information que l’intitulé.)
  • Et dans la mesure du possible, il doit être renseigné uniquement si une information supplémentaire doit être donnée. (Avec NPS, cela n'est malheureusement pas possible actuellement)

Sur base de ces règles, certains outils d'assistance permettent de lire uniquement le title s’il est renseigné. D'autres outils lisent l'intitulé et le title, c'est pourquoi il est préférable de ne pas avoir de redondance.

Astuce nps

Dans NPS, voici comment définir les informations correspondant au lien (title, destination, fenêtre):

  • Sélectionner les mots qui seront votre intitulé de lien,
  • Cliquer sur l’icône "insert/edit Link", la fenêtre suivante s'ouvre,
  • Vous pouvez alors renseigner ou modifier la destination d'un lien et le title du lien
  • Avec nps, si le title est vide, il reprendra automatiquement l’intitulé.
  • Si vous laissez la propriété "frame : default" (recommandé) les liens internes s'ouvriront dans la fenêtre courante, les liens externes dans une nouvelle fenêtre.
  • Si vous choisissez "Frame: new window", le lien s'ouvrira dans une nouvelle fenêtre et l'icône "nouvelle fenêtre" apparaîtra pour l'internaute.

 

Dernière mise à jour