←

→

Survol des hyperliens

novembre 14th, 2009 | Réflexions

Éric a récemment abordé le cas des boutons activés, je prends le relais et je m’interroge cette fois sur le survol des liens.

La convention veut que les liens soient identifiés par le soulignement de ceux-ci et je reste donc dans ce cas classique. Bien souvent ensuite (dans le but de signaler l’interaction) ce soulignement sera retiré au survol.

<style type="text/css">
    a:focus,
    a:hover
    {
        text-decoration:none;
    }
    a:active
    {
        outline:none;
    }
</style>

Remarquez au passage :

Je ne sais pas pour vous, mais j’ai tendance à trouver cette technique (pourtant répandue !) contre-intuitive. C’est comme si le lien « disparaissait » au survol, et que du coup il n’était plus possible (en apparence) de cliquer.

J’aurais tendance à préférer tout autre mise en forme au survol. Comme par exemple un changement de couleur. On pourrait même reprendre celle des liens visités tiens…

<style type="text/css">
    a
    {
        color:#1C6280;
        background-color:inherit;
    }
    a:hover,
    a:focus,
    a:visited
    {
        color:#1C6280;
        background-color:inherit;
    }
    a:active
    {
        outline:none;
    }
</style>

J’aimerais lire vos avis et vos arguments, je n’arrive pas à trancher cette question.

Question bonus : les sélecteurs enrichis pour les navigations au clavier, ça ne pose pas de souci ? Je pense notamment à une personne qui d’une part survol un lien à la souris, tant en tabulant sur un autre lien en parallèle : il se retrouve alors avec deux liens mis en évidence à la fois.

8 commentaires ↓

#1 vincent voyer le 11.16.09 à 10:49

Pour la suppression de l’outline au clic (en css) je suis carrément contre, je n’en vois pas l’utilité.

Si c’est un vrai lien (non ajax), l’outline ne sera pas visible longtemps (entre le moment ou on clique et ou la page se recharge)

Si c’est un lien ajax (genre un menu) alors il suffit dans le javascript qui gère le click sur le lien, de faire : this.blur() pour que le lien perde son état actif une fois cliqué.

Si le site est bien fait, lorsqu’on aura javascript désactivé, le lien aura un comportement classique que l’utilisateur attends.

Pour le hover c’est très tentant de modifier l’apparence du lien au survol mais selon l’article http://www.useit.com/alertbox/20040510.html (un peu vieux mais c’est toujours valable) :

There is no need to use special colors or other visualizations when the cursor hovers over a link. Doing so only makes the page appear more cluttered as the user moves the mouse across the screen.

 * Exception: if you've opted to present links with less than the maximum perceived affordance for clickability, you can recover some of the lost usability by signaling clickability when the user hovers over the link. For example, if your links aren't underlined, you can make an underline appear while hovering.
 * In any case, don't use bold-facing as a hover effect, because making the font wider may cause the text to re-align.
 * One useful hovering effect is to use link titles to help users predict where a link will lead before they click it. (If you're using a mainstream browser, you can see this effect by hovering over the links in this column.)

Donc à éviter la plupart du temps (le plus dur reste de convaincre le designer que non passer le lien en violet + supprimer le soulignement ce n’est pas so chic..)

#2 Stéphane Deschamps le 11.16.09 à 14:09

Bon je vais répondre à vous deux :

Vincent Valentin : moi j’aime bien faire disparaître le souligné au survol, parce que ça rend souvent le texte un poil plus lisible (les verticales descendantes ne subissent plus de « bruit »).

Vincent Voyer :

  1. this.blur() est une saloperie en accessibilité, il faut s’en tenir très très loin (je vois dans quel contexte spécifiquement tu l’utilises, mais par prudence je préfère le rappeler aux lecteurs de passage).

  2. Le survol en réalité a évolué depuis la remarque de Nielsen sur le sujet : je suis persuadé qu’un style différent au survol permet au visiteur de comprendre encore mieux que c’est un élément interactif (maintenant que les conventions de facto ont évolué vers cette perception « réactive » du lien), et pas un souligné « accidentel » (note bibliographique par exemple).

  3. Empiriquement, l’outline est souvent « trop » visible, du fait qu’on utilise des ruses CSS ici et là pour mettre des éléments flottants etc. Si on laisse l’outline tel quel, on se retrouve avec une floppée de pointillés sur toute une largeur de page, souvent disgrâcieuse. En revanche forcer l’outline au focus, c’est vital au clavier. Donc cette solution moyenne (un peu de Patrick Lauke, un peu de suppression sur active) est sans doute le meilleur des deux mondes.

#3 STPo le 11.16.09 à 14:12

Pour moi ce qui montre sans ambiguïté un lien, c’est le cursor:pointer au survol : c’est un comportement par défaut du navigateur là où le soulignement n’est qu’une convention (certes répandue). Et pour la navigation au clavier il y a l’outline.

Je n’ai donc aucun problème éthique à « désouligner » le lien au survol (n’en déplaise à Jakob Nielsen !), je trouve ça nettement plus intuitif qu’en changer la couleur (et si j’étais daltonien ?). D’ailleurs dans ta sidebar tu as ce comportement ! (sauf que tu soulignes des liens à la base non soulignés, au mépris des conventions ?)

Pour la question bonus… euh, imagine aussi que le type ait deux souris ! Trois bras ! Cinq yeux ! =D

#4 Vincent le 11.16.09 à 14:25

Stef,

Un point pour toi pour les empattements. Pas d’avis pour la question bonus ?

Chris,

Un point pour toi pour le curseur. Pour ma sidebar, tu sais mieux que moi que ce blog est un gros bricolage par toujours représentatif de ce que j’aime faire.

#5 Nicolas Hoizey le 11.16.09 à 15:42

Contrairement à Stéphane — ouah, je ne pensais pas dire ça un jour ! 😉 — je pense que virer le soulignement au survol n’est pas une bonne idée.

Changer la couleur par contre est intéressant — même si tout le monde n’en profitera peut-être pas — pour mettre en évidence l’ensemble du lien, notamment quand il y en a plusieurs qui se suivent.

Pas d’idée pour la question bonus.

#6 Stéphane Deschamps le 11.16.09 à 15:50

(« Nicolas Hoizey / Stéphane Deschamps : le divorce ! voir page 12 ») :)

Pour la question bonus (deux éléments représentés visuellement de la même manière, l’un survolé par la souris et l’autre ayant le focus au clavier) ça m’arrive souvent vu que je suis souvent à cheval entre le clavier et la souris, et très sincèrement ça ne me gêne pas, puisqu’au moment où je le fais je sais avec quel matériel je suis en train d’intéragir. Si je suis au clavier je suis les petits pointillés du focus (un point de plus pour eux), si je suis à la souris je suis des yeux le joli petit pointeur qui zigzague.

Pour être complètement exhaustif, j’ai en plus activé une fonction assez fréquente dans les pilotes de souris sous Windows, qui permet de mettre en évidence la position du pointeur en appuyant sur Ctrl au clavier (l’essayer c’est l’adopter, maintenant qu’on a tous des écrans gigantesques au regard des 640x480 de ma jeunesse, ou plutôt de votre jeunesse :)).

#7 tetue le 11.17.09 à 12:13

Pour pourvoir respecter la convention qui réserve le souligné aux liens, et pouvoir quand même distinguer le survol, simplement, sans aller piocher un autre effet, j’ai choisi (sur mon site perso) d’indiquer les liens par un souligné pointillé, qui devient un souligné plein au survol (a:focus, a:hover, a:active). C’est un chouïa + compliqué à mettre en oeuvre, mais c’est finalement assez chouette.

#8 David, biologeek le 11.20.09 à 14:41

@tetue : intéressant, mais dans ce cas il faut que tu changes le style des abbr pour ne pas les confondre avec des liens ?

En tout cas c’est une piste à laquelle je n’avais pas pensé mais qui pourrait être sympa :)

Laisser un commentaire

Mise en forme : vous pouvez utiliser la syntaxe Markdown. Vous verrez, c’est chouette !