truffo.fr / 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>

• URL désigne l’url de la ressource à atteindre.
• TITRE est le titre du lien
• INTITULÉ est l’ensemble des balises se situe entre les balises d’ouverture et de fermeture des liens.

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:

• Critère 6.1 [Bronze] Chaque lien sans titre de lien est-il explicite (hors cas particuliers) ?
• Critère 6.2 [Bronze] Pour chaque lien ayant un titre de lien, celui-ci est-il nécessaire ?
• Critère 6.3 [Bronze] Pour chaque lien ayant un titre de lien, celui-ci est-il pertinent ?
• Critère 6.4 [Or] Chaque intitulé de lien seul est-il explicite hors contexte (hors cas particuliers) ?
• Critère 6.5 [Bronze] Chaque lien identique a-t-il les mêmes fonction et destination ?
• Critère 6.7 [Bronze] Dans chaque page web, chaque lien, à l’exception des ancres nommées, a-t-il un intitulé ?

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

• soit prendre l’intitutilé du lien
• soit prendre le title s’il existe sinon le lien
• soit prendre le plus long des 2

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 raisons, 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.

Articles liées

1. Réseaux sociaux et la géolocalisation : multiplier les risques de vous faire cambrioler
2. Accessibilité des CMS
3. Étude de l’accessibilité d’eZ Publish
4. Premier site accessible avec eZ Publish : Tourisme & Handicap en Picardie
5. Conformité XHTML et accessibilité

• Faire des liens accessibles
• Conformités RGAA