Petite amélioration de la méthode Phark Revisited

Afin de concilier aspect visuel et accessibilité, il est souvent nécessaire de remplacer un texte par une image. Il existe pour cela des quantités de méthodes avec chacune leurs avantages et leurs inconvénients.

Celle que je privilégie généralement est la méthode Phark Revisited car elle ne nécessite ni balisage inutile ni hack CSS. Le principe est tout simple : on donne au texte une hauteur et une largeur correspondant à la taille de l’image de remplacement puis on indente le texte à gauche avec une valeur énorme de manière à le faire sortir de l’écran.

[php] <h1>Mon blog</h1> 
[css] h1 {     background: url(mon_blog.jpg);     height: 100px;     text-indent: -9999em;     width: 350px; } 

Voir l’exemple.

Il est même possible de rendre l’élément cliquable comme si c’était une image en procédant ainsi :

[html] <h1><a href="#" title="Retourner à l'accueil">Mon blog</a></h1> 
[css] h1 {     background: url(mon_blog.jpg);     height: 100px;     width: 350px; } h1 a {     display: block;     height: 100px;     text-indent: -9999em;     width: 350px; } 

Voir l’exemple.

Le seul problème est que lorsqu’on clique le lien, les pointillés apparaissent autour de l’élément sont bien plus étendus sur la gauche qu’on pourrait s’y attendre comme le montre la capture d’écran suivante.

Heureusement il existe une parade simple à cela. Il suffit de donner la valeur « hidden » à la propriété overflow. L’exemple complet devient donc :

[html] <h1><a href="#" title="Retourner à l'accueil">Mon blog</a></h1> 
[css] h1 {     background: url(mon_blog.jpg);     height: 100px;     width: 350px; } h1 a {     display: block;     height: 100px;     overflow: hidden;     text-indent: -9999em;     width: 350px; } 

Voir l’exemple.

Et voici le résultat :

Ce contenu a été publié dans Développement Web. Vous pouvez le mettre en favoris avec ce permalien.

7 réponses à Petite amélioration de la méthode Phark Revisited

Les commentaires sont fermés.