Chaque image texte porteuse d’information, en l’absence d’un mécanisme de remplacement, doit si possible être remplacée par du texte stylé. Cette règle est-elle respectée (hors cas particuliers) ?
Un visiteur malvoyant grossit le texte à 200 % dans son navigateur. Si ce « texte » est en réalité une image PNG ou JPEG, il devient flou, pixelisé, illisible. Un utilisateur en mode contraste élevé voit les couleurs imposées par son système — mais pas celles figées dans un fichier image. C’est le problème central du critère 1.8.
Une image texte, c’est une image dont le contenu principal est du texte. Logo mis à part, la plupart peuvent être remplacées par du vrai texte HTML stylé en CSS. Police personnalisée ? Disponible via @font-face. Couleur en dégradé ? background-clip: text. Ombre portée ? text-shadow. Le CSS couvre la quasi-totalité des effets typographiques que les graphistes demandent.
Deux exceptions légitimes existent. Première : un mécanisme de remplacement est proposé, c’est-à-dire un bouton ou un lien qui bascule vers une version texte HTML équivalente. Deuxième : l’effet graphique est impossible à reproduire en CSS — texte manuscrit, calligraphié, intégré dans une illustration complexe.
Parcourez votre page et identifiez chaque image contenant du texte lisible. Posez-vous la question : CSS pourrait-il produire le même résultat ? Si oui, remplacez l’image par du texte réel. Pas d’image texte, pas de problème.
6 tests pour confirmer le remplacement correct des images de texte
Image texte <img> et role="img"
Identifiez les éléments <img> et les éléments avec role="img" dont le contenu visible est principalement du texte.
- Pour chaque image texte trouvée, vérifiez qu’au moins une condition est satisfaite :
- Un mécanisme de remplacement existe (ex. : bouton permettant d’afficher le contenu en texte HTML).
- L’effet graphique utilisé (calligraphie, texture, intégration dans une illustration) ne peut pas être reproduit en CSS.
- Si aucune condition n’est satisfaite pour une image, le test échoue pour cette image.
Bouton image texte <input type="image">
Identifiez les éléments <input type="image"> dont l’image source affiche du texte lisible (ex. : « Valider », « Envoyer »).
- Pour chaque bouton image texte trouvé, vérifiez qu’au moins une condition est satisfaite :
- Un mécanisme de remplacement existe.
- L’effet graphique ne peut pas être reproduit en CSS.
- Si aucune condition n’est satisfaite, le test échoue.
Objet image texte <object>
Identifiez les éléments <object type="image/..."> dont le contenu affiché est du texte.
- Pour chaque image objet texte trouvée, vérifiez qu’au moins une condition est satisfaite :
- Un mécanisme de remplacement existe.
- L’effet graphique ne peut pas être reproduit en CSS.
- Si aucune condition n’est satisfaite, le test échoue.
Image texte embarquée <embed>
Identifiez les éléments <embed type="image/..."> dont le contenu affiché est du texte.
- Pour chaque image embarquée texte trouvée, vérifiez qu’au moins une condition est satisfaite :
- Un mécanisme de remplacement existe.
- L’effet graphique ne peut pas être reproduit en CSS.
- Si aucune condition n’est satisfaite, le test échoue.
Image texte bitmap <canvas>
Identifiez les éléments <canvas> qui affichent du texte via JavaScript (via ctx.fillText() ou équivalent).
- Pour chaque canvas texte trouvé, vérifiez qu’au moins une condition est satisfaite :
- Un mécanisme de remplacement existe.
- L’effet graphique (rendu bitmap, texture, composition visuelle complexe) ne peut pas être reproduit en CSS.
- Si aucune condition n’est satisfaite, le test échoue.
Image texte vectorielle <svg> sans <text>
Identifiez les éléments <svg> porteurs d’information dont le texte est dessiné comme des formes vectorielles (<path>) plutôt que structuré via des éléments <text>.
- Si le texte SVG est intégralement structuré avec
<text>, ce test ne s’applique pas. - Pour chaque SVG concerné, vérifiez qu’au moins une condition est satisfaite :
- Un mécanisme de remplacement existe.
- L’effet graphique ne peut pas être reproduit en CSS.
- Si aucune condition n’est satisfaite, le test échoue.
Exemples
❌ Non conforme : Titre de section affiché en image PNG
<div class="section-header">
<img src="titre-nos-services.png" alt="Nos services">
</div>L’image affiche le texte « Nos services » avec une police personnalisée. L’attribut alt est présent (critère 1.1 respecté), mais l’image elle-même viole le critère 1.8 : cet effet typographique est reproductible en CSS avec @font-face. Un utilisateur qui grossit le texte à 200 % voit une image floue ; un utilisateur en mode contraste élevé ne peut pas adapter les couleurs.
✅ Conforme : Même titre rendu en HTML et CSS avec police personnalisée
<style>
@font-face {
font-family: 'MaPolice';
src: url('/fonts/mapolice.woff2') format('woff2');
}
.section-header h2 {
font-family: 'MaPolice', sans-serif;
color: #1a2b3c;
font-size: 2rem;
letter-spacing: 0.05em;
}
</style>
<div class="section-header">
<h2>Nos services</h2>
</div>Le texte est du vrai HTML. Il se redimensionne sans perte de qualité, respecte les paramètres de contraste du système, et est lu correctement par les lecteurs d’écran sans dépendre d’un attribut alt. La police personnalisée est chargée via @font-face : résultat visuel identique, accessibilité garantie.
✅ Conforme : Bannière avec texte calligraphié intégré à une illustration (cas valide)
<section class="promo">
<img
src="banniere-soldes-calligraphie.jpg"
alt="Soldes d’été, jusqu’à 60 % de réduction"
>
<a href="/soldes" class="promo__link">Voir les offres</a>
</section>Le texte est calligraphié à la main et composé dans une illustration complexe. Cet effet ne peut pas être reproduit en CSS. L’image est donc acceptable au titre du critère 1.8 : l’effet graphique justifie le recours à l’image. Elle dispose par ailleurs d’un alt pertinent pour satisfaire le critère 1.1.
Astuces et pièges
⚠️ Confondre le critère 1.1 et le critère 1.8
Le critère 1.1 vérifie que l’image a une alternative textuelle. Le critère 1.8 demande si l’image devrait exister du tout. Une image texte peut avoir un alt irréprochable et quand même échouer au critère 1.8, parce que CSS aurait pu remplacer l’image entière. Les deux critères s’appliquent indépendamment.
⚠️ Le logo d’entreprise est toujours exempt
Un logo contenant du texte (nom de marque, slogan intégré graphiquement) est explicitement exclu du critère 1.8 dans les cas particuliers du RGAA. La représentation visuelle d’une marque bénéficie de cette exemption. En revanche, un titre de rubrique qui reprend le nom de l’entreprise en dehors du logo n’est pas couvert par cette exception.
💡 @font-face et Google Fonts ont éliminé la plupart des justifications
L’argument « cette police n’est pas disponible sur tous les systèmes » ne tient plus. @font-face charge la police depuis votre serveur ou Google Fonts. Dégradés, ombres, masques de texture : le CSS les gère. En audit, quand un développeur cite le rendu typographique comme raison d’utiliser une image, testez d’abord si l’équivalent CSS existe — dans 90 % des cas, il existe.
⚠️ SVG : tout dépend de si le texte est structuré avec <text> ou aplati en <path>
Un SVG qui utilise des éléments <text> pour son contenu textuel échappe au test 1.8.6 : le texte est accessible nativement, redimensionnable et stylable via CSS. C’est uniquement quand le texte est « aplati » en chemins vectoriels <path> (export Illustrator ou Figma par défaut) que le test s’applique. Vérifiez le code source du SVG, pas son rendu visuel.
⚠️ Un mécanisme de remplacement doit lui-même être accessible
Proposer un bouton « Version texte » pour basculer l’image en HTML est une solution valide — à condition que ce bouton soit lui-même accessible au clavier et aux lecteurs d’écran. Un lien sans href, sans role="button" et sans gestion du focus ne remplit pas cette condition. Le mécanisme de remplacement doit fonctionner pour tous les utilisateurs.
Questions fréquentes
Qu'est-ce qu'un mécanisme de remplacement dans le contexte du critère RGAA 1.8 ?
C’est un dispositif qui permet à l’utilisateur d’obtenir une version textuelle du contenu affiché en image. Par exemple : un lien vers une version texte de la page, un bouton qui bascule le rendu entre image et texte HTML, ou une préférence dans les paramètres du site. Ce mécanisme doit lui-même être accessible et utilisable sans avoir besoin de voir l’image de texte.
Comment le critère RGAA 1.8 s'applique-t-il aux logos d'entreprise contenant le nom de la marque ?
Non. Les logos et dénominations commerciales sont explicitement exclus du critère 1.8 (cas particulier). Assurez-vous cependant que le critère 1.1 est respecté : le logo doit avoir une alternative textuelle pertinente via alt ou aria-label, décrivant la marque ou la fonction du lien s’il est cliquable.
Comment distinguer en RGAA 1.8 un effet graphique CSS justifié d'un simple manque d'effort ?
La barre est haute. Une ombre portée, un dégradé, une police personnalisée, une transparence : CSS les gère. Ce qui ne peut pas être reproduit : une texture photographique réelle incrustée dans les lettres, un reflet physique sur un objet tridimensionnel, ou un rendu issu d’un logiciel de design sans équivalent CSS. En audit, demandez à l’équipe de démontrer concrètement pourquoi le CSS échoue, avec un exemple de tentative.
Comment rendre conforme un bouton <input type="image"> qui affiche un texte stylé ?
Remplacez-le par un <button> avec un contenu textuel stylé en CSS. Le <button> est nativement accessible, son texte est dans le DOM, et son comportement est identique. La migration est aussi l’occasion d’améliorer la conformité sur les critères 11.x relatifs aux formulaires.
Comment le critère RGAA 1.8 s'applique-t-il aux images texte dans les emails HTML ?
Non. Le RGAA 4.1.2 s’applique aux pages web HTML rendues dans un navigateur. Les emails HTML relèvent d’autres référentiels. Pour le web, concentrez-vous sur les six types d’éléments HTML listés dans les tests 1.8.1 à 1.8.6.