Remplacer du texte par une image
Dès que l'onsouhaite utiliser une police un peu éxotique, on se retrouve très rapidement à utiliser des images pour remplacer du texte. Dans ce cas, deux grands problèmes se posent. Le premier est celui de l'accessibilité. Mon texte est-il toujours lisible si on désactive les images, si on visionne la page en mode texte ou si la page est lue par un synthétiseur vocal ? Le second est celui de la sémantique et du référencement de la page. Le texte est-il toujours référencé par les moteurs de recherche, n'ajoute-il pas de balises qui ne portent pas de snes ? Le remplacement de texte est souvent utiliser en titre, il serait donc dommage que ce titre ne soit pas pris en compte dans un moteur de recherche par exemple. Le troisième problème éventuel (que je n'avais pas signalé plus haut) est celui de l'intérêt d'une telle lecture. Si tu t'intéresses aussi peu à ce sujet qu'à la reproduction des batraciens en Afrique Australe, je te conseille d'attendre le billet suivant ou de te préparer à une lecture chiante).
Autant le dire tout de suite, je ne connais pas aujourd'hui de solution répondant à tous ces problèmes (si ce n'est de ne pas utiliser d'image à la place du texte).
Énumérons les techniques à notre disposition. La première consiste à utiliser tout bêtement une image par titre et d'inclure cette image dans le code de la façon suivante: <img src="titre-image.png" alt="Titre" />. Cette solution basique pose un gros problème: le texte défini dans l'attribut alt n'est pas référencé par un moteur de recherche, de plus d'un point de vue sémantique, on insère une balise image qui correspond à du texte, ce n'est clairement pas propre: du texte doit être identifié comme tel. Dans le même genre, il y a la solution qui consiste à encoder un alphabet entier sous forme d'image et à créer ensuite du texte de la façon suivante: <img src="N.png" alt="N"><img src="i.png" alt="i"> pour le texte Ni
(ce qui ne veut rien dire mais au moins c'est court). Là le problème est le même que précédemment, mais en plus le texte sera lu lettre par lettre par un synthétiseur vocal, c'est donc à proscrire. Si on veut utiliser cette solution (qui à l'avantage d'être plus légère quand on a de nombreux textes en images) on placera le texte entier dans le premier attribut alt et on laissera les suivants vides. Enfin les solutions similaires avec une (ou des) balise object (Qu'est ce qu'une balise object ? La réponse est par ici.) à la place d'une image posent les mêmes problèmes.
Il fallait donc trouver autre chose. Il y a la désormais célebre astuce de Fahrner qui consiste à ne pas afficher le texte et à utiliser une image de fond en texte de remplacement grâce à CSS (tout est expliqué en anglais malheureusement dans le lien donné ci-dessus). Problème: cette solution fait que le texte n'est pas lu par cerains logiciel de lecture d'écran. De plus, si vous désactivez les images dans votre navigateurs, adieu les titres.
Une amélioration est proposée pour supprimer le problème des lecteurs d'écran: cacher le texte au lieu de ne pas l'afficher. Il reste toujours dans ce cas le problème de la personne qui navigue en supprimant les images.
Voilà à ce jour l'état des lieux. En l'absence de solution miracle, j'ai décider de ne pas utiliser pour l'instant de texte en image. Pourtant, quand on voit ce qu'il est possible de faire, comme le montre si bien CSS zen garden, on regrette que ça ne soit pas mieux gérer. La meilleure solution étant d'utiliser la dernière astuce proposée et de fournir une feuille de style alternative pour les utilisateurs n'affichant pas les images.