Remplacement de texte par une image en CSS
Dans un design web il est parfois nécessaire de remplacer du texte par une image. Cela permet notamment d'avoir des textes qui ressembles à ce que vous souhaitez, tout en ayant un contenu textuel lisible par les moteurs de recherche et les lecteurs d'écran. Cet article présente une solution en CSS qui se révèle vraiment efficace pour l'accessibilité web.
Pourquoi utiliser des images à la place du texte
L'utilisation d'une image à la place du texte est une solution qui possède de multiples avantages :
- Avoir un texte avec des effets similaires à ce que l'ont peut avoir grâce à CSS 3 (ombre, couleur ...) tout en restant compatible avec les vieux navigateurs. Avec les images il est aussi possible d'avoir des effets qui ne sont pas encore possible avec CSS.
- Faire en sorte que Google et les lecteurs d'écrans puissent lire le texte comme si de rien n'était
- Si l'image n'a pas pu être chargée, le texte peut facilement prendre le relais
- Grâce au responsive design l'image peut ne pas être chargée pour certains supports (exemple : les smartphones). A l'inverse, l'image peut être remplacée par une illustration en haute définition pour les écrans rétinas.
Historique des méthodes de remplacement par une image
Historique il y a eu plusieurs méthodes de remplacement de texte par une image :
- FIR (Fahrner Image Replacement) : le texte est mis dans un span puis caché dans un display:none. Cette méthode 2 inconvénients : il faut ajouter un span (ce qui alourdi le code HTML) et la plupart des lecteurs d'écran ne lisent pas les textes qui sont dans un display:none.
- Phark Method : le texte à une indentation de -9999px donc disparaît du cadre visible. Malheureusement, cette méthode créer des problèmes de performances car le navigateur web doit créer un cadre invisible avec ces dimensions.
Une méthode accessible et SEO-friendly
La bonne méthode à adopter est la méthode "Kellum Method" qui consiste à utiliser la propriété CSS "text-indent" à "100%". De cette manière les performances sont moins impactées que la technique de -9999px.
Pour expliquer cette méthode, prenons un code HTML d'une balise h1 à remplacer par une image. Sachant que la balise h1 est importante pour le référencement, il faut garder le texte visible par les moteurs de recherche :
Le code CSS pour remplacer ce titre par une image est celui-ci :
Et voilà, grâce à ce petit bout de code tout simple votre titre peut être remplacé par une image sans changer la source HTML. Ce code est à garder sous le coude de tous les développeurs front-end et des web designers tant il est utile.