Comment gérer l’absolue necessité d’avoir des titres « beaux », qui exploitent tous ces effets oh combien à la mode ( »Ouah il fait trop web 2.0 ton site! ») tout en leur conservant malgré tout un minimum d’attrait pour les moteurs, éternels crawlers avides de texte ?

Cette question m’est venue lors du référencement d’un site relativement jeune et truffé d’Ajax, de flash et de titres en images, dans lequel le principal mot-clef était complètement absent du contenu textuel et en particulier des titres des rubriques.

Des solutions de remplacement d’images via CSS existent depuis un moment déjà, mais un problème revient malgré tout de façon récurrente : l’absence de balise ALT et donc l’accessibilité de l’image.

Voici par exemple une possibilité pour rétablir artificiellement cette balise grâce à une image transparente; ce, afin de fournir à la fois du contenu textuel, une image attrayante et un texte de remplacement qui sera lu par les navigateurs textes:

/* html */
<h1>
<img src="transparent-retablir-alt.gif" 
alt="Texte de remplacement"/>
Titre format texte
</h1>

/* CSS */
h1{
width: 300px;
height: 40px;
background-image: url('titre-image.jpg');
text-indent: -5000px;
}

Voici pour clore cet article différentes techniques sur le remplacement d’images (en anglais); ainsi qu’un article qui insite plus particulierement sur le problème de l’accessibilité.

Commentaires