É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 :
- que je complète mon sélecteur pour le cas d’une navigation au clavier (j’y reviendrai plus tard) ;
- la définition de l’état actif, trouvée via ce très bon billet sur la suppression de l’
outline.
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.