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

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 :)).

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.

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.

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

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.

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..)