Les 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 :
- Les liens qui composent un menu (ou une arborescence de site),
- Les liens de contenu proposés au sein d’un texte,
- Les liens proposés en périphérie du contenu principal,
- Etc.
Choisissez bien vos intitulés de liens car s’ils ne sont pas suffisamment clairs ou mal choisis, vos utilisateurs vont vite être perdus.
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.
- Éviter les liens ayant un intitulé identique pour 2 cibles différentes.
- Éviter également de donner des intitulés différents pour une même cible.
- 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.
- 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 (hors ancre pointant vers un paragraphe particulier de la page).
- Ê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.
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.
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. Il est également recommandé de donner un title au lien. 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.
Il pourra 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 en être informé avoir avant de cliquer.
L'ouverture dans une nouvelle fenêtre peut être déroutante pour certains utilisateurs (en particulier des aveugles) surtout s’ils ne sont pas prévenus.
exemple de lien externe pointant vers le site du CTIE.
Une bonne utilisation du title
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 AEM, 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.
- approche centré utilisateur (sans title) ok
- approche centré utilisateur (avec title= « A.C.U. ») pas ok car title pas clair
- approche centré utilisateur (avec title= « User centered design») pas ok car l’intitulé totalement différent
- approche centré utilisateur (avec title= « approche centré utilisateur (User centered design)») ok
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.
Astuce AEM
Dans AEM, 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 "hyperlink", la fenêtre suivante s'ouvre,
- Vous pouvez alors renseigner ou modifier la destination d'un lien.
- Si vous laissez la propriété "target" les liens internes s'ouvriront dans la fenêtre courante, les liens externes dans une nouvelle fenêtre.
Dernière modification le