CSS : la bonne façon de remplacer un lien texte par une image

Il est courant de remplacer un bout de texte par une image. Ça permet notamment d’avoir un titre mis en forme avec un belle police de caractère. L’astuce en CSS qui permet ceci est extrêmement simple et la plupart des gens la connaissent.

Il n’en reste pas moins que c’est souvent mal utilisé ou en tout cas qu’on peut l’améliorer. C’est ce que je veux vous montrer en prenant l’exemple des liens, car je croise régulièrement des sites sur lesquels un élément très disgracieux vient entacher le remplacement du texte : le contour. Pour être exact ce n’est pas LA façon de faire, c’est UNE des possibilités.

Préambule technique

Le contour (ou « outline » en anglais, avec la propriété CSS du même nom) d’un lien c’est le cadre en pointillé qui apparaît autour de celui-ci lorsqu’on clique dessus. Il n’est pas affiché longtemps (juste le temps de charger la page liée) mais ce n’est franchement pas beau.

Pourquoi parler du contour dans un article de remplacement de texte par une image ? Tout simplement parce que le code CSS utilisé fait intervenir la proriété text-indent afin de masquer le texte. Cette propriété CSS sert, comme son nom l’indique, à indenter le texte comme le fait la touche de tabulation dans un traitement de textes. L’indentation peut-être positive ou négative.

Exemple

Imaginons que vous souhaitez remplacer le titre principal de votre site, qui est généralement un lien, par un beau logo. On utilise pour ça un bout de code CSS qui va faire en sorte que le texte disparaisse de l’écran et qu’une image de dimensions précises soit affichée à la place. Le moyen le plus rapide d’y arriver est le suivant :

a.replace {
    text-indent: -9000px;
    width: 205px;
    height: 80px;
    background: url(replace.gif) 0 0 no-repeat #fff;
    display: block;
}

Dans cet exemple, que vous utilisiez un float à la place du display ou encore autre chose n’a pas d’importance. Le fait est qu’en fonction du navigateur utilisé, le contour du texte déporté vers la droite de 9000 pixels est apparent lors du clic.

En ajoutant à ce code la propriété overflow: hidden, comme on a défini les dimensions du lien le contour sera limité à l’image elle-même et n’ira pas jusqu’au texte qui se trouve être 9000 pixels plus loin vers la gauche :

a.replace {
    text-indent: -9000px;
    width: 205px;
    height: 80px;
    background: url(replace.gif) 0 0 no-repeat #fff;
    display: block;
    overflow: hidden;
}

Certains diront qu’avec le CSS il est hyper simple de supprimer le contour des liens. Evidemment, il suffit pour cela d’utiliser la propriété outline: none. Oui c’est vrai. Mais non. Vous ne l’utiliserez pas si vous êtes soucieux de l’accessibilité de votre site (pour les personnes à mobilité/motricité réduite entres autres), permettant grâce aux contours des liens de faire une navigation au clavier, notamment à l’aide de la touche de tabulation qui passe d’un lien à l’autre.

6e95c48eb2b6b26c56be2aa8e79dcb5beee