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.

<h1>Mon blog</h1>

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 :

dimanche 14 janvier 2007 à 19h10 - Développement Web

Rétroliens

Aucun rétrolien pour le moment.

Les rétroliens pour ce billet sont fermés.

Commentaires

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.

Seza le dimanche 14 janvier 2007 à 22h03

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.

JMF le dimanche 14 janvier 2007 à 22h58

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

Sam le lundi 15 janvier 2007 à 00h42

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

LaBlonde le mardi 16 janvier 2007 à 12h41

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.

Olivier G. le samedi 27 janvier 2007 à 17h55

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.

JMF le samedi 27 janvier 2007 à 19h10

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.