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

  1. Seza dit :

    Cette méthode est très intéressante, je pense que je l’emploierai dans mes prochains développements. Je trouve que c’est une approche agréable de présenter un beau code source.

    Il n’y a pas si longtemps on vantait et on vante toujours le fait d’utiliser xhtml + css allégeait grandement les pages. Ce genre de technique et d’autres si elles sont très employées dans une page peuvent donner des feuilles de style finallement assez lourde. Je souhaitais savoir ce que vous en pensiez.

  2. JMF dit :

    Je pense qu’il ne faut pas abuser de ce genre d’artifice en effet. Cependant, une feuille CSS n’étant téléchargée qu’une fois, l’allégement de la page est réel.

  3. Sam dit :

    Une technique que j’utilise depuis le premier jour (ça fait quelques année déjà), et qui a toujours fonctionné parfaitement (lire: je n’ai encore jamais eu de retours négatifs) sur mes sites pros comme persos.

    >Seza : Si la technique se retrouve très employée sur une page, c’est qu’il y a beaucoup d’images texte. Dans ce cas, il faut probablement blâmer le responsable de la maquette graphique plutôt que celui de l’intégration 😉

  4. LaBlonde dit :

    Pour ma part j’utilise la méthode classique du span caché. Je connaissait cette méthode aussi mais je croyais que la valeur text-indent fonctionnait mal sur certains navigateur (ie pour ne pas le citer).
    Quoiqu’il en soit, ton post est intéressant..

  5. Olivier G. dit :

    Attention, cette méthode est très génante quand vous naviguez avec les images désactivées, l’image disparaît et vous n’avez ni le alt, ni le texte.

  6. JMF dit :

    Olivier G.> Tu veux dire quand on navigue avec les images désactivées ET les CSS activées.

    Comme toutes les techniques, celle-ci n’est pas parfaite mais je trouve que c’est la moins mauvaise que je connaisse.

  7. gauthier dit :

    uen autre méthode, que j’espère pertinente dans voter cas, car je n’ai pas trop le temps de vérifier 🙂

    pour chaque lien, texte ou image, un moyen simple de zapper ces fichus pointillés :

    <a href=’toto’ onfocus=’this.blur()’>…[texte ou img]…</a>

    un simple javascript permettrait de parcourir automatiquement toute la page, sur l’événement onload du body, pour appliquer "ce patch" sur tous les liens sans se poser de question 🙂

    <body onload=’cleanAnchors()’>

    <script type=’text/javascript’>
    function cleanAnchors()
    {
    var anchors = document.getElementsByTagName(‘A’)
    for(i in anchors) { anchors[i].onfocus = this.blur() }
    }
    </script>

    voila, pas certain du this dans ce contexte, mais de mémoire, ça devrait rouler. Là encore, pas le temps de tester.

Les commentaires sont fermés.