Et vous savez vous faire des liens ?

Et vous savez vous faire des liens ?

Élément de base du Web, le lien permet de naviguer d’une page à l’autre, d’un site à l’autre. Faire une lien parait extrêmement simple, pourtant lorsque je me suis intéressé à l’accessibilité, j’ai été forcé de me rendre compte que je ne savais pas faire un lien correct. Et vous savez vous faire un lien que tout le monde peut utiliser ?

Spécifications HTML

Dans le langage HTML, un lien est définis selon la syntaxe suivante :

<a href="URL" title="TITRE">INTITULÉ</a> 

Critères d'accessibilités

Référentiel

Prenons les critères du label Accessiweb comme référentiel, il donne un certain nombre de critères pour faire des liens corrects:

Bien entendu, nous trouvons des critères similaires dans le RGAA ou directement dans WCAG 2.

Comment les aides techniques voient les liens ?

Pour bien comprendre, il faut savoir que les aides techniques pour donner le nom du lien vont utiliser le titre et/ou l’intitulé. En effet, les aides techniques vont

Il est également important de savoir qu’un mode de navigation classique pour les personnes utilisant ces aides techniques est de lire le document et ensuite reprendre la liste des liens pour continuer à surfer sur internet. Il donc indispensable que leur intitulé désigne exactement la fonction du lien.

La bonne utilisation du title

L’exemple classique est celui des liens “Lire la suite”. On a généralement un code du genre :

<a href="..." title="Lire la suite de Et vous savais vous faire des liens ?">Lire la suite</a> 

Dans ce genre de cas pas de problème, le title est plus long que le intitulé, les aides techniques vont prendre le title comme intitulés. Cette exemple met en évidence clairement le rôle que joue l’attribut title, celui de rendre explicite un lien qui ne l’est pas. En effet, dans de nombreux site, le célèbre lien “lire la suite” se répète pour chaque entré d’une liste d’articles. Comment différiencer un lien “Lire la suite” d’un lien “Lire la suite” ? Voila un autres rôles du title, celui de différencier les différents liens présent sur une page Web.

Exemple d'un nuage de tags

Un autre exemple est celui des nuages de tags. On trouve par exemple dans ce genre de widget des liens du genre :

<a href="..." title="2 articles">Bonnes pratiques Web</a> 
<a href="..." title="9 articles">PHP</a> 

Regardons les 3 modes d’utilisation pour voir les différents problèmes

Uniquement l'intitulé

Dans ce cas, les liens sont “Bonnes pratiques Web” et “PHP”, l’internaute n’a pas accès à l’information sur le nombre d’article.

Uniquement le title

Dans ce cas, les liens sont “2 articles” et “9 articles”, l’internaute a connaissance du nombre d’article liés mais ne sait pas à quoi cela correspond.

Le plus long entre le title et l'intitulé

Dans ce cas, les liens sont, “Bonnes pratiques Web” et “9 articles”, l’internaute pourrait croire que le tags “Bonne pratiques Web” est associé à 9 articles du fait la position relatives des 2 liens. En réalité, c’est 2 bien articles. L’information n’est pas transmise, et pire encore elle peut induire en erreur. La bonne écriture pour ces liens

<a href="..." title="Bonnes pratiques Web (2 articles)">Bonnes pratiques Web</a> 
<a href="..." title="PHP (9 articles)">PHP</a> 

Ici, 2 des 3 modes d’utilisation ont parfaitement accès à l’information. Il reste le cas du troisième, celui qui ne voit que l’intitulé. Vous allez me dire qu’il n’a qu’à utiliser l’un des 2 autres modes d’utilisation, dans un monde idéale je vous donnerais raison, mais dans la réalité cette attribut est tellement mal utilisé qu’un utilisateur ne comprendrais rien au Web. Mais, on a ici une des explications sur le fait qu’il ne faut utiliser le title uniquement lorsque celui s’avère absolument nécessaire.

Liens images

Jusqu’ici, nous avons parlé des liens textuels mais les pages regorge de lien image. Nous avons le même schéma que tout à l’heure à la seule différence que c’est l’attribut alt de l’image qui joue le rôle de l’intitulé. C’est à l’alternative de l’image de préciser le rôle du lien. Dans le cas des liens images, l’attribut title sur un lien un totalement inutile, puisque le contenu du alt peut contenir toute l’information.

Liens composite

Dernier cas plus rare et quelque peu tordu, c’est les liens qui sont composés à la fois de texte et d’image ou de plusieurs images. L’intitulé du liens est donc la concaténation des textes et des alternatives aux images. Il est facile de voir, que dans ce cas les intutilés de liens sont rarement pertinant, et l’utilisation d’un title plus long est obligatoire pour avoir un lien compréhensible. Le lien est l’élément de base d’internet, sans lui il est impossible de naviguer. Respecter ces quelques critères simples, c’est le moins que l’on puisse faire.

comments powered by Disqus

Voir aussi

La relation nofollow : échec dans la lutte anti-spam

La relation nofollow : échec dans la lutte anti-spam

nofollow est une valeur non standard de l’attribut rel (relation) de la balise HTML <a>. L’attribut nofollow sert à spécifier que le …

Les fautes d'orthographes améliorent le référencement

Les fautes d'orthographes améliorent le référencement

Quand vous tapez une recherche dans votre moteur préféré, il vous arrive régulièrement de faire une ou plusieurs fautes d’orthographes, de ne …

Javascript, flash et synthèse vocale

Javascript, flash et synthèse vocale

Pour les non-voyants, je vais mettre une alternative au javascript et aux flash que je vais cacher le contenu en css. Voila une phrase que j’ai …

Alternative textuelle des images mettre des "alt" partout ?

Alternative textuelle des images mettre des "alt" partout ?

Les pages sont aujourd’hui composé de nombreux contenus riches (images, vidéos, animations, applications, … ). Ces éléments améliorent …

A la une
  • Rencontre du numérique 2019 - Nîmes
  • référencement naturel d'un hôtel
  • Développeur eZ Platform
  • Tech lead Symfony
  • Expert Qualité Web

Copyright - Sylvain FIX

2009 - 2019