Accessia
Auditer mon site
Tous les critères par thématique

Thématique 1 · Images

Critère RGAA 1.8 : Images de texte remplacées par du texte

Le texte dans une image devient flou quand on l'agrandit, ne peut pas être recoloré ni lu par une police adaptée, et n'est pas toujours restitué correctement.

Niveau
AA
WCAG 2.2
1.4.5
Thématique
Images
Vérification
Détection partielle

La question posée par le RGAA

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) ?

Comment respecter ce critère

  • Remplacez les images de texte (bannières, titres, boutons) par du vrai texte mis en forme en CSS.
  • Les logos et les cas où l'apparence du texte est essentielle font exception ; ils gardent une alternative textuelle.

Exemple

Un texte est présent sous forme d'image (détecté par OCR) alors qu'il pourrait être du vrai texte HTML : non redimensionnable, non sélectionnable, invisible pour les lecteurs d'écran.

✗ À éviter

<img src="titre-promo.png" alt="Soldes -50%">

✓ À faire

<h2 class="promo">Soldes <strong>-50 %</strong></h2>

Les tests officiels

Pour être conforme, chaque élément concerné de la page doit satisfaire les tests suivants :

  1. 1.8.1 — Chaque image texte (balise <img> ou possédant un attribut WAI-ARIA role="img") 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) ?
  2. 1.8.2 — Chaque bouton « image texte » (balise <input> avec l’attribut type="image") porteur d’information, en l’absence d’un mécanisme de remplacement, doit si possible être remplacé par du texte stylé. Cette règle est-elle respectée (hors cas particuliers) ?
  3. 1.8.3 — Chaque image texte objet (balise <object> avec l’attribut type="image/…") 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) ?
  4. 1.8.4 — Chaque image texte embarquée (balise <embed> avec l’attribut type="image/…") 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) ?
  5. 1.8.5 — Chaque image texte bitmap (balise <canvas>) 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) ?
  6. 1.8.6 — Chaque image texte SVG (balise <svg>) porteuse d’information et dont le texte n’est pas complètement structuré au moyen d’éléments <text>, 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) ?

Source : RGAA 4.1.2, critère 1.8, DINUM (nouvel onglet), sous Licence Ouverte. Le RGAA précise aussi des cas particuliers et un glossaire à consulter pour un audit officiel.

Comment Accessia le vérifie

Accessia détecte automatiquement une partie des manquements à ce critère et les signale « à confirmer » ; la revue guidée vous fait vérifier le reste avec les tests officiels.