De quels liens parle-t-on ?

De tous les liens ? Bien sûr que non...

En effet, il est devenu très courant pour un site ou un blog, que le logo ou le titre du site soit un lien vers la page d'accueil, ou qu'un menu sous forme d'onglets serve de portes d'accès vers les différentes rubriques du site. Pour certains éléments, il n'est donc pas nécessaire de faire une mise en forme particulière pour faire comprendre au visiteur qu'il s'agit de liens. C'est souvent le cas pour les parties suivantes d'un site :

  • son entête (logo, bannière, animation Flash...)
  • ses menus (sidebar, onglets, big footer, menu déroulant, connexion rapide...)
  • éventuellement la page d'accueil, par exemple si il s'agit de plusieurs images cliquable

Pour généraliser un peu, on pourrait englober tous les éléments de la page qui sont mis en avant graphiquement d'une façon ou d'une autre.

Contrairement à ces liens "graphiquement reconnaissables", les liens faisant partis du contenu de la page doivent renseigner l'utilisateur : est-ce un lien ? est-ce que je l'ai déjà visité ? où est-ce que ça va m'amener ? de quoi ça parlera ? en quelle langue ça sera ? Je parlerais donc ici seulement des liens textuels du site, comme ceux figurant dans un article, un texte, un blogroll, une page de contact, une arborescence, un système de navigation, etc ....

Ce que j'entends par "liens accessibles"

Quand je dis que je veux rendre mes liens accessibles, je sous-entends "permettre à quiconque d'utiliser facilement mes liens tout en ayant connaissance de l'état de chacun". Oula, c'est pas beaucoup plus clair ça... :(

Bon, je vais lister les principaux critères que j'ai retenu alors, ça sera sûrement plus compréhensible :

  • Mettre en évidence les liens dans le texte
  • Permettre de les différencier facilement quelquesoit son handicap
  • Différencier les liens visités des liens non visités
  • Signaler la langue de la page visée
  • Différencier les liens sortants des liens internes
  • Et bien sûr, ne pas altérer l'esthétique du site

Les erreurs fréquemment commises

Comme énoncé dans le chapô de cet article, beaucoup de sites ont des liens qui ne sont pas accessibles à tous. En effet, une personne souffrant d'un handicap visuel pourrait ne pas discerner facilement un lien d'un texte simple. Autre exemple, il est rare d'avoir une mise en forme des liens qui permettent de voir si l'on a déjà visité le lien ou pas.

Voici donc une liste des principales erreurs que j'ai pu rencontrer sur les sites que j'ai fréquenté ces derniers temps :

  • Enlever le soulignement d'un lien. Les gens sont habitués à avoir des liens soulignés. Le soulignement permet de trouver rapidement et facilement un lien dans un texte, et ce pour tout le monde.
  • Affecter seulement une couleur et/ou une mise en gras à un lien (sans le soulignement). La distinction par la couleur peut poser des problèmes à une personne ayant des difficultés pour différencier certaines couleurs (daltonien, etc...). Quant au lien en gras, il ne sera pas distinguable d'un simple texte en gras. Le soulignement (ou quelques autres distinctions...) permet de trouver rapidement et facilement un lien dans un texte, et ce pour tout le monde.
  • Oublier d'appliquer un style au lien lorsqu'il prend le focus a:focus. Cet évenement étant utilisé par les internautes naviguant au clavier, il est nécessaire d'y appliquer au moins les mêmes propriétés qu'à l'évenement hover.
  • Ne pas changer le style du pointeur de la souris lors du survol. Les gens sont habitués à voir apparaitre une main lors du survol d'un lien, alors pourquoi changer cette recette efficace ?
  • Ne pas différencier les liens visités a:link et les liens non visités a:visited, ou les différencier seulement par un changement de couleur, ce qui peut poser les mêmes problèmes que pour le deuxième point.
  • Ne pas différencier les liens sortants et les liens internes. N'ayant pas eu le temps de m'y pencher et la jugeant moins "cruciale" que les autres, je commets moi aussi cette erreur pour l'instant. Il existe néanmoins quelques bons exemples comme le blog de David Larlet, Biologeek, qui les distinguent très bien à l'aide d'une petite astéristique sous forme d'image placée à la fin du lien, via la feuille de style CSS.

La solution que j’ai adoptée...

Après avoir réunis tous ces éléments, je me suis lancé dans l'édition de mon CSS. Voici les modifications que j'y ai apporté :

  • Suppression du soulignement et application d'une couleur et d'une bordure inférieure en tirets de la même couleur pour les liens généraux a et les liens non visités a:link.
  • Changement du style de la bordure inférieure pour des pointillés, toujours de la même couleur, pour les liens visités a:visited
  • Changement de couleur du texte et de la bordure inférieure des liens lors d'un survol a:hover, d'une prise de focus a:focus ou d'un clic a:active
  • Ajout de la langue entre crochets à la fin d'un lien a:after pour les liens disposant d'un attribut hreflang renseigné a[hreflang]. Attention cette instruction ne sera appliquée qu'avec des navigateurs récents (ex: Firefox 2.xx, IE 7.xx, Opera 9.xx)

Et voici le bout de code correspondant : 

a, a:link {
	color: #B18B89;
	text-decoration: none;
	border-bottom: 1px dashed #B18B89;
}

a:visited {
	color: #B18B89;
	border-bottom: 1px dotted #B18B89;
}

a:hover, a:focus, a:active {
	color: #C5A9A8;
	border-color: #C5A9A8;
}

a[hreflang]:after {
	content: "\0000a0[" attr(hreflang) "]";
	color : #C5A9A8;
	font-size: 0.8em;
}

Edit : Grâce à un bout de code emprunté à David de Biologeek, j'ai trouvé un moyen de différencier mes liens internes de mes liens sortants avec une petite image appliquée en background, et en le couplant à la notification de la langue du lien. Ainsi, un lien externe aura la langue notifiée entre crochet, ainsi qu'une petite flèche. Un lien interne aura quant à lui ni la langue (logique mon blog est toujours en français), ni la flèche. Je sais que cela fait un peu redondant et que l'affichage de la langue seulement pour les liens sortants pouvait me dispenser de l'utilisation de la flèche. Seulement, l'utilisation des deux simultanément me parait plus compréhensible, sans gêner davantage la lecture. Et voici le bout de code :

 /* affichage de la langue seulement pour les liens sortants */
a[href^="http://"][hreflang]:after {
	content: "\0000a0[" attr(hreflang) "]";
	color : #B18B89;
	font-size: 0.8em;
}

a[hreflang]:hover:after, a[hreflang]:focus:after, a[hreflang]:active:after {
	color: #C5A9A8;
}

/* affichage de l'image seulement pour les liens sortants */
a[href^="http://"] {
	background: url(images/fleche_lien.png) no-repeat top right;
	padding-right: 10px;
}

href^="http://" qui est entre crochets est un sélecteur par attributs qui teste si l'attribut href commence par "http://". Ainsi, si vous souhaitez faire un lien interne dans un article vous n'avez qu'à indiquer le chemin en absolu (ex: "/15-accessibilite-comment-mettre-en-forme-les-liens-de-son-site"). Les liens sortants commenceront eux par "http://" ce qui permet de les reconnaitre et d'y appliquer une image en background placée tout à droite.

Cependant je reconnais une faiblesse dans ce système... Une personne ayant des problèmes de vue comme une myopie ou autre, pourrait avoir du mal à différencier la bordure en pointillés de la bordure en tirets. Il ne pourrait alors pas distinguer un lien visité d'un lien non visité.

D'autres solutions...

Il existe bien sûr d'autres solutions pour améliorer l'accessibilité de vos liens. Je vais essayer dans lister quelques unes qui me viennent en tête mais que je n'ai pas appliquée sur ce blog.

  • On peut rajouter du texte à la fin d'un lien visité grâce à la propriété CSS content. On pourrait par exemple rajouter une chaine "[v]" en exposant (le v signifiant visité ;) ), via la feuille de style pour ne pas géner la lecture. Ex : Lien de test visité [v]
  • Pour différencier les liens sortants et les liens internes, on peut, à la manière de David Larlet, rajouter à la fin du lien une image ou un signe permettant de comprendre qu'il s'agit d'un lien sortant. On peut par exemple créer une image d'une petite fléche allant sur l'extérieur pour signaler un lien sortant.

Edit : Après avoir demandé l'accord de David, je vous publie le petit bout de code qu'il a conçu dans son CSS pour notifier les liens sortants [1].

a[href^="http://"] {
	background:url(img/feuille_a.png) no-repeat 100% 0;
	padding-right:0.5em
}

Conclusion

Même si une multitude de solutions existent pour rendre nos liens accessibles, il faudra attendre que tous les navigateurs supportent les "evenements" comme a:after ou les critères de sélection XPath a[hreflang] pour pouvoir signaler facilement et distinctement les différentes informations émanant d'un lien. Ça avance... mais nous ne sommes toujours pas égaux devant un site...
Vous avez pourtant vu le peu de code nécessaire pour rendre des liens "plus" accessibles pour tous... il ne s'agit donc pas d'un manque de moyens mais plutôt d'un manque d'informations.

Allez maintenant courage, lancez-vous, et j'espère que ce billet vous aidera à améliorer la navigation de vos visiteurs sur votre site ou blog. Il existe d'autres solutions pour cela, mais ne faites attention à ne pas en faire "trop". Il ne faut pas non plus que vos liens deviennent surchargés pour pouvoir répondre aux besoin de tous et qu'ils gênent en fait la lecture pour une grande majorité. Quelques critères peuvent paraître négligeable du moment que les informations principales sont notifiées et facilement discernables.

Notes

[1] Je te remercie d'ailleurs David de m'avoir permis de piocher dans ton CSS car je n'aurais sûrement jamais trouvé seul la méthode pour le faire. Le "^=" n'étant même pas indiqué comme opérateur possible dans mon Mémento CSS. D'ailleurs si quelqu'un peut m'indiquer une source sur ce sujet, ça serait sympa !