Images de texte
Le texte doit être implémenté en tant que texte réel, et non sous forme d'image tramée, sauf si l'image est essentielle (un logo, une capture d'écran d'interface) ou entièrement personnalisable par l'utilisateur.
Ce que ce critère demande
Lorsque la même présentation visuelle peut être obtenue avec du texte réel et du CSS, il faut utiliser du texte réel. Les images de texte ne se zooment pas proprement, ne peuvent pas être sélectionnées, ne peuvent pas être traduites par le navigateur, ne peuvent pas être restylisées par le CSS de l’utilisateur, et se pixellisent à fort grossissement. Exceptions : les logos, les images essentielles (une capture d’écran montrant l’apparence d’une interface) et les images de texte que l’utilisateur peut personnaliser.
Comment y répondre
- Afficher les titres, bandeaux et contenus promotionnels en texte HTML avec des polices web, et non sous forme de PNG exportés.
- Pour les badges marketing (« Nouveau », « Soldes », « -30 % »), utiliser un
<span>stylisé en CSS plutôt qu’une image sprite. - Si un designer fournit une image hero avec du texte intégré, demander que ce texte soit fourni sur un calque séparé à superposer avec CSS.
- Pour les citations au format carte de réseau social générées côté serveur, les afficher sous forme de SVG avec des éléments
<text>lorsque c’est possible — le texte SVG est mis à l’échelle proprement et est sélectionnable. - Utiliser
@font-facepour charger des polices d’affichage personnalisées au lieu de rastériser la typographie décorative.
Erreurs courantes
- Publicités en bannière où tout le contenu (« Offre limitée ! Achetez maintenant ! ») est rendu sous forme de JPEG, flou à 200 % de zoom.
- Cartes de niveaux tarifaires où « 99 €/mois » fait partie d’une image plutôt que d’être du texte HTML.
- Séparateurs de sections avec du texte stylisé (« Nos services ») livrés en PNG au lieu d’un
<h2>stylisé. - Appels à l’action entièrement basés sur des images, avec un texte alternatif dupliquant le contenu visuel.
- Captures d’écran de style e-mail utilisées sur des pages marketing, alors que le contenu pourrait simplement être du texte réel.
Pourquoi c’est important
Les images de texte constituent aussi un échec de traduction et de référencement — Google ne peut pas les indexer, Chrome ne peut pas les traduire, et les utilisateurs de loupes d’écran les voient pixellisées. La correction est généralement triviale : remplacer l’export par du HTML. La friction est d’ordre organisationnel — les designers livrent des JPEG parce qu’ils sont plus rapides à produire dans Figma qu’à spécifier.