Image texte

Une image texte est une image dont le contenu visible est du texte. Au lieu d'utiliser du vrai texte HTML stylé en CSS, le texte est aplati dans un fichier image (PNG, JPG…). L'utilisateur ne peut alors ni le redimensionner, ni en changer la police, ni le lire avec un lecteur d'écran.

Votre designer exporte une bannière « -50 % sur tout le site » depuis Canva, en JPG. Sur desktop, le rendu est impeccable. Sur mobile, le texte rétrécit jusqu'à devenir illisible. En zoom 200 %, il pixellise. Un lecteur d'écran n'y voit qu'une image avec un attribut alt, s'il existe.

#Pourquoi le vrai texte l'emporte toujours

Le critère 1.4.5 des WCAG (niveau AA) est limpide : si la technologie permet d'obtenir le même rendu visuel, utilisez du texte HTML. Pas une image.

Les raisons sont concrètes :

• Zoom : le texte HTML reste net à 400 %. Un PNG devient flou dès 150 %.
• Personnalisation : l'utilisateur peut ajuster police, taille, interlignage et couleurs sur du vrai texte. Sur une image, rien.
• Mode haut contraste : les systèmes d'exploitation inversent les couleurs du texte HTML. Le texte dans une image garde ses couleurs d'origine, parfois illisibles en mode inversé.
• Lecteurs d'écran : un lecteur d'écran restitue tout le alt en une seule phrase, sans sauts de ligne ni structure. Un paragraphe entier aplati en image devient une bouillie sonore.

<!-- Image texte : à éviter -->
<img src="promo-banner.jpg" alt="-50 % sur tout le site jusqu'au 31 mars">
 
<!-- Vrai texte : accessible et personnalisable -->
<p class="banner">
  -50 % sur tout le site
  <time datetime="2026-03-31">jusqu'au 31 mars</time>
</p>

#Le piège du « bon alt »

Beaucoup pensent qu'un alt bien rédigé règle le problème. Le alt rend l'image compréhensible, pas personnalisable. Un utilisateur dyslexique qui a besoin de la police OpenDyslexic ne peut pas l'appliquer à votre bannière JPG, même avec le meilleur alt du monde.

Autre angle mort : la traduction. Les outils de traduction intégrés aux navigateurs traduisent le texte HTML, pas le texte incrusté dans une image. Un visiteur non francophone face à votre bannière ne verra que des pixels incompréhensibles.

Le RGAA traite ce sujet dans son critère 1.8 : une image texte porteuse d'information doit être remplacée par du texte stylé quand c'est techniquement possible.

#Exceptions légitimes

Deux cas où l'image texte reste acceptée :

• Logotypes : le texte fait partie de l'identité visuelle (logo, nom de marque). C'est une exception explicite des WCAG.
• Présentation indispensable : la typographie est l'information, par exemple un échantillon de police, une reproduction de document historique ou une capture d'écran.

Tout le reste (bannières, boutons, titres, menus) doit être du vrai texte.

#En résumé

Si vous pouvez obtenir le même résultat en HTML et CSS, ne mettez pas votre texte dans une image. Le vrai texte se redimensionne, se personnalise et se lit par les technologies d'assistance. L'image texte reste figée.