Soulignez vos hyperliens !

8 novembre 2012,
par Romy Têtue

Mots-clefs associés à cet article :

Non, vous n’êtes pas obligé de faire des liens bleus soulignés. Mais ce n’est pas une raison pour les dénuder au point de les rendre imperceptibles ! Pourquoi jouer ainsi à cache-cache avec vos internautes ?

Les liens hypertexte sont le fondement de la navigation sur le Web [1]. Il est donc essentiel que l’internaute les identifie facilement dans vos pages, sans quoi vous risquez de le perdre. Ne négligez donc pas leur signalétique.

La couleur bleue et le soulignement permettent de reconnaître un lien à coup sûr : c’est une convention graphique forte, héritée des premiers temps du Web, dont des sites particulièrement soucieux de leur taux de conversion et donc de leur utilisabilité, tels que Google et Amazon, n’ont pas encore pris le risque de s’affranchir. Pourquoi ? Parce tout le monde comprend immédiatement, presque intuitivement.

Vous êtes pourtant nombreux à vouloir changer cela, pour des raisons esthétiques évidentes. Personnalisons donc la couleur pour l’assortir à la charte du site ! Débarrassons-nous de ce bleu #0000FF, pas très confortable pour l’œil humain, car il a tendance à « vibrer ». Mais est-ce une raison pour supprimer le soulignement dans le même geste ? Oups, ne jetez pas le bébé avec l’eau du bain !

La différence de couleur ne suffit pas

Vous pouvez choisir assez librement la présentation de vos liens hypertextes. L’essentiel est qu’ils soient repérables dans la page. Cependant, la différence de couleur n’est pas un critère distinctif suffisant, pour plusieurs raisons.

- Quand certains mots d’un texte sont en couleur, comment l’internaute peut-il en deviner la signification sans se tromper ? S’agit-il de mettre en exergue une expression importante ? de valoriser un intertitre ? ou de signaler un hyperlien ?

Où sont les liens ?

Pouvez-vous identifier à coup sûr les liens de l’extrait de page web ci-contre ? Non. Car si les liens semblent ici signalés par la couleur verte, tous les mots de cette couleur ne sont pas des liens, la bonne blague ! Ici, comme souvent, liens, exergues et titres ont la même couleur : c’est un moyen facile de personnaliser une charte graphique. Trop facile et pas assez robuste. Utiliser la couleur seule ne suffit pas, car laisse trop de place aux erreurs d’interprétation. Seul le corps de texte ou la graisse distingue titre et exergue des liens : c’est trop peu pour clarifier.

- La couleur utilisée dans cet exemple, #759937, est très jolie mais n’a pas un contraste suffisant pour rester correctement lisible en toutes circonstances : les mots écrits dans ce vert sont difficiles à déchiffrer hors des conditions optimales de luminosité ambiante, par exemple quand vous surfez dans le train ou dans la rue, ce qui est de plus en plus fréquent.

Ces liens sont imperceptibles en vision tritanope

Enfin, vos internautes n’ont pas tous une excellente acuité visuelle. S’appuyer uniquement sur la couleur pour différencier visuellement les liens du texte qui les entoure ne suffit pas : certains utilisateurs passeront totalement à côté. N’oubliez pas les daltoniens !

Bref, l’information ne doit pas passer uniquement par la couleur [2].

Soulignez les liens par défaut !

Puisque ce ne peut pas être par la couleur seule, comment distinguer un lien du reste, si ce n’est en le soulignant par défaut ? tweetais-je alors. Un picto ? complexe à mettre en œuvre, en plus de surcharger graphiquement la page… En gras ? intéressant, mais cela réserve cet enrichissement typographique à ce seul usage, en plus de détourner de son rôle initial d’instance, pour leque il faudra trouver une alternative…

Soulignés, on ne s'y trompe plus !

Les souligner par défaut ne laisse plus aucune place au doute et facilite d’autant la navigation. Pourquoi ? Sur le Web, le soulignement est une convention forte. C’est le comportement standard des navigateurs et les utilisateurs s’attendent à voir les liens soulignés. Retirer le soulignement rend leur identification plus difficile. Pourquoi s’en priver ? C’est si caractéristique, qu’il est recommandé de le réserver aux seuls hyperliens [3].

Pour laisser les liens soulignés par défaut, il suffit… de ne toucher à rien, puisque c’est le comportement naturel de tous les navigateurs ! Plus précisément, et par sécurité, on préférera les définir comme dans la feuille de style par défaut pour HTML 4, c’est-à-dire :

:link, :visited { text-decoration: underline }

C’est tellement plus simple !

Lisibilité optimum

Comme la distinction par la couleur n’est ni nécessaire et ni méliorative, autant se simplifier la vie, en affichant les liens dans la même couleur que le texte dans lequel ils sont, ce qui est finalement plus élégant.

Alors qu’il faut plusieurs déclarations CSS et jongler avec les couleurs pour anticiper tous les cas d’affichage possibles, choisir le simple soulignement des liens par défaut se règle finalement en deux lignes de CSS, pour tout le site :

a { color: inherit; }
:link, :visited { text-decoration: underline }

Inutile d’en faire plus ! Même pour le survol, puisqu’il suffit de s’appuyer sur le comportement par défaut : le changement du pointeur suffit. Mais maintenant que vos liens sont clairement identifiables, vous vous offrez la liberté d’agrémenter, en virant le soulignement au survol (bof), en changeant la couleur du texte ou encore en ajoutant une couleur de fond, par exemple translucide au survol et plus contrastée au focus.

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici
  • Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Suivre les commentaires : RSS 2.0 | Atom