Les titres, boutons et accroches sont-ils écrits en vrai texte HTML plutôt que publiés comme images ?
Critère officiel 1.8 — 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) ?
Pourquoi c'est important
Un titre de section publié en image PNG ne peut pas être agrandi sans pixellisation. Une personne malvoyante qui zoome à 200 % voit un texte flou. La police choisie dans le navigateur n'est pas respectée, le mode sombre non plus. Le texte n'est pas copiable, pas indexé par les moteurs de recherche, pas traduisible automatiquement. Tout ce que le HTML et le CSS savent faire nativement, l'image-texte le perd.
Exemples concrets
Ce qui est conforme
Le titre "Nos services" est codé en <h2> avec une typographie personnalisée chargée en police web. Le résultat visuel est identique à une image, mais le texte reste redimensionnable, copiable, indexable, et respecte les préférences de l'utilisateur. À 200 %, le titre reste net.
Ce qui pose problème
Le titre "Nos services" est publié comme image (titre-services.jpg). Même avec un alt correct, l'utilisateur qui agrandit la page voit un texte pixellisé. Une personne en thème sombre voit le titre rester en couleur claire. Le moteur de recherche du site ne le trouve pas.
Comment agir
Faites toutes les typographies du site en HTML et CSS. Pour une police particulière, demandez à votre prestataire de la charger via @font-face ou un service comme Google Fonts. Les seules exceptions admises par le RGAA sont les logos, les textes dont la forme typographique est elle-même le sujet (affiche artistique reproduite), et les textes intégrés à une photographie réelle. Pour tout le reste — titres, boutons, bannières, accroches — le texte doit être en HTML.
Règles clés
- Tout texte affiché doit être du HTML stylé par CSS, sauf trois exceptions admises par le RGAA : logos, textes dont la forme typographique est l'élément essentiel (calligraphie, reproduction d'affiche artistique), textes faisant partie intégrante d'une photographie réelle (panneau de rue, enseigne, manuscrit).
- Si une image-texte relève d'une de ces exceptions, son attribut alt doit reproduire à l'identique le texte visible dans l'image, sans le résumer ni le paraphraser.
- Pour les typographies personnalisées, utiliser des polices web auto-hébergées via @font-face plutôt que des services externes (Google Fonts, Typekit) : meilleure performance, conformité RGPD, indépendance vis-à-vis d'un tiers.
Erreurs fréquentes
- Titres de sections en JPEG/PNG au lieu de <h2> ou <h3> stylés en CSS
- Boutons avec leur libellé en image au lieu d'un <button> ou <a> avec texte HTML
- Menus de navigation dont les items sont des images plutôt que des liens textuels
- Slogans, accroches et chiffres-clés publiés comme visuels graphiques au lieu d'être codés en HTML
- Exports Canva, Figma ou PowerPoint glissés tels quels comme images, alors qu'ils contiennent du texte qui pourrait être recréé en HTML
Exemples de code
titre publié comme image
✗ Non conforme<img src="titre-nos-services.jpg" alt="Nos services">Même avec un alt correct, l'utilisateur qui agrandit la page voit un texte pixellisé. La police forcée dans le navigateur, le mode sombre et les préférences typographiques ne s'appliquent pas. Le texte n'est ni copiable, ni indexable, ni traduisible automatiquement.
titre en HTML stylé par CSS
✓ Conforme<h2 class="section-title">Nos services</h2>
<style>
.section-title {
font-family: 'Playfair Display', serif;
font-size: clamp(1.5rem, 4vw, 2.5rem);
color: #1a1a6e;
}
</style>Même rendu visuel que l'image, mais le texte reste redimensionnable, copiable, indexable, traduisible et respecte les préférences utilisateur (police, couleur, espacement, mode sombre).
image-texte relevant d'une exception RGAA
✓ Conforme<img src="logo-commune.svg" alt="Commune de Nom_ville">Le logo est une exception admise par le RGAA. L'attribut alt reproduit à l'identique le nom inscrit dans le logo, sans le résumer ni le paraphraser.
Référence WCAG : 1.4.5