Texte inséré dans image : RGAA 1.8, impact et correction

C'est quoi

Une image de texte est un fichier graphique (PNG, JPG, WebP) qui contient du texte plutôt que d'afficher ce texte directement en HTML.

Ce type d'image pose plusieurs problèmes :

Le texte ne s'adapte pas au zoom navigateur ni au mode haute contraste.
Les lecteurs d'écran doivent deviner le contenu depuis l'attribut alt, qui est souvent absent ou incomplet.
Les moteurs de recherche indexent moins bien le texte dans une image que le texte HTML.

Exceptions prévues par WCAG 1.4.5 / RGAA 1.8 : les logos et marques (logotypes), les images de texte essentielles à la transmission du message (reproduction de document, signature manuscrite numérisée), et les images de texte dont l'apparence est personnalisable par l'utilisateur (ex. : police, taille et couleur réglables).

Qui est touché

Les personnes malvoyantes qui agrandissent le texte : l'image devient floue et illisible quand le texte HTML resterait net.
Les personnes utilisant un lecteur d'écran : si l'attribut alt manque ou est approximatif, le contenu est perdu.
Les personnes en mode contraste élevé (Windows, macOS) : le texte en image n'adapte pas ses couleurs au thème de l'utilisateur.

Impact business

L'impact varie selon la place de l'image dans la hiérarchie de la page. Un titre principal en image prive les utilisateurs de lecteur d'écran du contenu le plus important si l'attribut alt est absent ou inexact.

Du côté SEO, les moteurs de recherche accordent moins de poids au texte contenu dans une image qu'au texte HTML natif, ce qui peut affaiblir le référencement du contenu ciblé.

En mode contraste élevé, les images de texte ne s'adaptent pas : le texte peut devenir invisible si le fond d'image et la couleur forcée du navigateur se confondent.

Sources des chiffres

Comment le détecter

Audit Mynto : le scanner signale les images dont le nom de fichier suggère un contenu textuel et dont le texte alternatif est long.
Manuel : désactive le CSS (extension "Web Developer" > CSS > Disable All Styles). Si une information textuelle disparaît ou devient illisible, elle est portée par une image.
Indicateur rapide : zoome la page à 200%. Le texte HTML reste net ; une image de texte se pixellise.

Comment corriger

Avant - HTML

<!-- Texte affiché via une image -->
<img src="titre-produit.png" alt="Découvrez notre offre Pro">

Après - HTML

<!-- Texte rendu en HTML, stylé en CSS -->
<h2 class="titre-produit">Découvrez notre offre Pro</h2>

Supprime l'image et remplace-la par un élément HTML approprié (h1, h2, p, span, button...) avec le texte en clair.

Applique ensuite le style CSS voulu : police web (Google Fonts, Variable Font), taille, couleur, ombre. Tout ce que l'image reproduisait peut être obtenu en CSS.

Sur WordPress, vérifie que le thème et les constructeurs (Elementor, Bricks) n'ont pas remplacé des titres par des images dans les "Image Box" ou "Hero Banner". Ces composants proposent généralement un champ texte natif.

Questions fréquentes

Mon logo contient du texte, dois-je le remplacer par du HTML ?

Non. Les logos sont explicitement exclus du critère RGAA 1.8. L'attribut alt doit quand même décrire le logo, par exemple alt="Mynto - audit accessibilité web".

Un texte stylé en CSS peut-il reproduire la police de mon image ?

Oui, dans la quasi-totalité des cas. Les polices web (Google Fonts, Adobe Fonts, Variable Fonts) permettent de reproduire la typographie d'une image. Charge la police via un lien ou @font-face et applique-la en CSS.

Que faire si l'image de texte est générée dynamiquement ?

Si le texte est dynamique (prénom d'un utilisateur, résultat en temps réel), remplace la génération d'image par un élément HTML mis à jour en JavaScript. L'image dynamique n'est pas une exception reconnue par le RGAA.

Cette erreur est-elle sur ton site ?

Lance un audit Mynto gratuit. Tu sauras en quelques minutes si ton site est concerné, sur quelles pages, et avec quel impact.

Texte inséré dans une image (image de texte)