Les liens hypertextes sont au coeur du web. Sans eux, rien n’existerait, et nous avons pourtant tendance à les négliger. Bien employés, ils ajoutent de la valeur aux contenus publiés ; bâclés, ils peuvent aller jusqu’à leur retirer tout intérêt. Raison de plus pour s’y intéresser et en prendre grand soin.

Combien de fois êtes vous passés à côté de documents passionnants pour cause de liens invisibles, introuvables, incompréhensibles, illisibles ou inaccessibles par bête négligence ? Ce genre de choses ne doit plus arriver, et ce billet se propose justement de vous aider à les éviter en passant en revue les erreurs les plus fréquemment rencontrées et les optimisations trop souvent méconnues. Parce qu’il n’y a que sous UNIX que les liens sont symboliques.

Anatomie d’un lien hypertexte

Selon la définition du W3C :

Un lien est une balise à deux bouts – les ancres – et une direction. Le lien va de l’ancre “source”, et pointe vers l’ancre “destination”. Celle-ci peut être n’importe quel ressource sur le web (une image, une vidéo, un fichier musical, un document HTML, un élément embarqué dans un document HTML, etc…)

Nous nous intéressons aujourd’hui au lien hypertexte visible matérialisé par la balise <a> ... </a>. Il existe aussi le lien <link /> qui fera l’objet d’un autre billet.

<a href="https://t37.net">Frédéric de Villamil</a>

L’ancre “source” possède nombre d’attributs. Certains d’entre eux sont sous utilisés, voire franchement ignorés quand leur emploi à bon escient ajouterait pourtant une valeur certaine à vos liens.

hreflang :

L’attribut hreflang vous permet de spécifier la langue du document destination. Il s’utilise à l’aide du code langue à deux lettres :

<a href="https://t37.net" hreflang="fr">
    Frédéric de Villamil
</a>

Sous les navigateurs modernes, un peu de CSS permet d’afficher cette information juste à coté du lien :

a[hreflang]:after {
   content: "\0000a0[" attr(hreflang) "]";
   color:#999;
}

On peut aussi choisir d’afficher une icône en fonction du code langue :

a[hreflang=fr] {
    padding-left: 20px;
    background: url("fr.png") left no-repeat;
}

Ceci affichera un petit drapeau français à gauche de vos liens.

Bien que ceci ne soit pas supporté par Internet Explorer, il serait dommage de priver les 20% de vos visiteurs munis de navigateurs modernes non ?

type :

Souvent ignoré, l’attribut type vous permet d’indiquer le type mime du document destination.

<a href="https://t37.net/cv.pdf" type="application/pdf">
    Télécharger mon CV
</a>

Comme précédemment, un peu de CSS permettra aux utilisateurs de navigateurs modernes d’afficher une petite icône à côté du lien pour un document destination au format PDF :

a[type=application/pdf] {
    padding-left: 20px;
    background: url("pdf.png") left no-repeat;
}

Évidemment, ceci reste valable pour n’importe quel type mime.

Les attributs ne s’excluant pas l’un l’autre, on pourra proposer :

<a href="https://t37.net/cv.pdf" type="application/pdf" hreflang="fr">
    Télécharger mon CV
</a>

En utilisant les deux bouts de CSS proposés ci dessus, le visiteur verra donc au premier coup d’oeil que le lien pointe vers un PDF rédigé en français.

title :

L’attribut title donne le titre exact de la destination, en plus de l’image ou du texte placés entre la balise ouvrante et la balise fermante.

<a href="https://t37.net/cv.pdf" title="Curriculum Vitae de Frédéric de Villamil">
    Télécharger mon CV
</a>

Le navigateur affiche généralement la valeur de l’attribut title au passage de la souris sur le lien. Un peu de javascript permet même d’afficher celui-ci dans une élégante info bulle.

title permet de spécifier le titre d’une oeuvre ou d’un document d’une manière plus formelle et complète qui n’aurait pas forcément eu sa place dans le flot du texte. Les moteurs de recherche prennent aussi ces informations supplémentaires en compte, ce qui peut s’avérer utile.

rel :

Souvent mal utilisé, rel décrit la relation existant entre le document courant et celui indiqué dans l’attribut href. On trouve de nombreux exemples d’utilisation de rel dans les Microformats, comme le le microformat rel="tag", mais aussi dans les liens de type <link />

<a href="https://t37.net/articles/tag/microformats" rel="tag">
    Microformats
</a>

Comme précédemment, vous pouvez signaler la présence d’un tag – par exemple – à l’aide d’un peu de CSS. Et comme précédemment, cela ne fonctionnera que sur les navigateurs modernes.

a[rel=tag] {
    padding-left: 20px;
    background: url("tag.png") left no-repeat;
}
rev :

À l’inverse de l’attribut rel, l’attribut rev décrit la relation entre le document pointé par l’attribut href et le document courant. L’attribut rev est notamment utilisé dans les Microformats, particulièrement dans les vote-links.

<a href="https://t37.net" rev="vote-for">
    Frédéric de Villamil
</a>

Vous pouvez maintenant utiliser un peu de CSS afin d’afficher de petites icônes à côté du lien afin de permettre à vos visiteurs utilisant un navigateur moderne – et non pas forcément récent – de connaître votre opinion à propos du lien cible :

a[rev=vote-for] {
    padding-left: 20px;
    background: url("for.png") left no-repeat;
}

a[rev=vote-against] {
    padding-left: 20px;
    background: url("against.png") left no-repeat;
}
tabindex :

tabindex nous fait quitter le domaine de l’information sur la destination des liens pour entrer dans le cadre de l’ergonomie et de l’utilisabilité. tabindex sert à indiquer dans quel ordre les liens – ou les champs d’un formulaire – doivent être parcourus lorsque le visiteur navigue à l’aide de la touche tab de son clavier.

accesskey

Là aussi, on rentre dans l’ergonomie et l’accessibilité, puisque accesskey permet de définir une touche permettant d’accéder directement au lien – ou au champ d’un formulaire – à l’aide d’une seule touche.

Un peu de clarté ne nuit pas

Donner une ribambelle de liens tout juste séparés d’un espace dans une même phrase ne sert pas à grand chose. Non seulement le visiteur aura du mal à définir où commence et où finit un lien, mais il ne saura très probablement pas de quoi ces liens vont parler. Si ce genre d’énumérations est particulièrement fréquente sur les blogs, elle est évidemment à proscrire.

Pour des raisons d’accessibilité, chaque lien doit être séparé du suivant par un caractère imprimable qui ne soit pas un lien, comme le stipulent les WAI Guidelines du W3C.

Until user agents (including assistive technologies) render adjacent links distinctly, include non-link, printable characters (surrounded by spaces) between adjacent links. [Priority 3]

Une avalanche de liens n’apporte souvent pas grand chose à un billet. Si pour une raison ou une autre vous souhaitez cependant indiquer un grand nombre de liens concernant un même sujet, vous pouvez le faire de manière bien plus pratique ou élégante. Pourquoi ne pas ajouter à la fin de votre article une annexe présentant un lien et sa description par ligne ? S’ils sont si pertinents, ils méritent cet espace dédié. Et s’ils ne le méritent pas, c’est probablement qu’il vous faut remettre leur présence en cause.

Tant qu’on en est à parler de ce qui se trouve entre l’ancre “source” et l’ancre “destination”, réfléchissez bien à ce que vous y mettez. C’est en effet de votre choix que naîtra chez votre visiteur l’envie de cliquer ou de ne pas cliquer. S’il s’agit d’une image ou d’un bouton, n’hésitez pas à abuser des attributs alt et title. Au sein d’un paragraphe, soyez clairs, précis et concis. Non seulement vous influencerez vos visiteurs dans leurs choix, mais en plus vous aiderez les moteurs de recherche. Que demander de plus ?

Mettez vos liens en valeur

Pour être visités, vos liens doivent avant tout être vus par vos visiteurs, et ce au premier coup d’oeil. Pour cela, un peu de CSS peut faire beaucoup.

Un peu de typographie

Commencez par leur choisir une couleur qui tranche avec celle du texte et du fond. J’ai choisi un texte noir sur fond blanc pour la lisibilité, et je mets mes liens en rouge pour les faire ressortir. Laissez vos liens soulignés. Il s’agit du comportement par défaut de tous les navigateurs, et l’oeil du visiteur cherche instinctivement des éléments soulignés pour cliquer dessus. En revanche, ne soulignez que les liens – une bordure sous un titre n’est pas un soulignement. Si vous devez donner le titre d’une oeuvre et souhaitez la souligner, profitez-en tant qu’à faire pour donner un lien vers sa page officielle ou Wikipedia, ça ne coûte rien et ça donnera peut-être envie au visiteur d’aller plus loin.

Utilisons les comportements

La balise a dispose de deux pseudo classes bien pratiques, supportées par tous les navigateurs et combinables entre elles : hover et visited.

hover permet de définir un comportement lorsque la souris survole le lien. visited permet de définir le comportement lorsque le lien a déjà été visité.

Je ne sais pas s’il existe une règle définie pour cela, mais j’ai tendance à toujours utiliser les mêmes comportements.

  • a : couleur vive tranchant à la fois avec le texte et le fond, souligné.
  • a:hover : même couleur que précédemment, sans soulignement. La transition souligné / non souligné au survol de la souris permet d’attirer l’oeil sur le fait qu’il s’agisse d’une zone active de la page.
  • a:visited : couleur dans les mêmes tons qu’un lien non visité, mais plus foncé, souligné. J’avais coutume d’utiliser l’attribut text-decoration: line-through; pour indiquer que ce lien n’était plus à visiter – je le supprimais tout de même au au survol de la souris – mais je me suis rendu compte que cela grêvait trop la lisibilité du document.
  • a:visited:hover : même couleur plus foncée que précédemment, mais avec le soulignement en moins.

Je tiens à préciser que j’utilise ces règles dans le corps de texte d’une page, et non dans le menu dans lequel je supprime généralement le soulignement. En effet, cette partie d’une page me semble suffisamment parlante d’elle même et est généralement assez lourde – surtout sur un blog – pour ne pas tout souligner systématiquement. Peut-être est-ce une erreur ? Je n’ai cependant pas trouvé assez d’arguments qui me poussent vraiment à changer pour l’instant.

Attendez vous à voir pas mal de modifications de ce billet dans les prochains jours. Je suis complètement crevé, il doit donc être bourré de fautes de français, et probablement incomplet par rapport à ce que j’avais initialement prévu de faire.

Perry the Platypus wants you to subscribe now! Even if you don't visit my site on a regular basis, you can get the latest posts delivered to you for free via Email: