Dur Comme Faire

En faisant du rangement chez moi, j'ai récemment retrouvé ce vestige de ma découverte du web.

Il s'agit de la seconde édition de l'ouvrage de référence, à l'époque, sur l'HTML. Paru en 1996, il traite notamment des nouveautés de la version 3 d'HTML.

La prochaine rencontre Blog en nord - Meet the bloggers Lille se déroulera le vendredi 9 février 2007 à Lille en deux temps :

• Une table-ronde concernera l'écriture multimédia, pour le web et dans les blogs de 14 h à 17 h.
• Une soirée «apéro» Blog en Nord - Meet the bloggers Lille pour des rencontres conviviales dès 19 h 30.

Pour en savoir plus, rendez-vous sur l'annonce de la rencontre.

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 :