Images de fond décoratives et contenu non-texte : icônes, SVG, emoji
En bref — décoratif : on l'ignore ; informatif : un équivalent texte
Tout ce qui n'est pas du texte — une image de fond CSS, une icône de police, un pictogramme SVG, un emoji — relève du critère WCAG 1.1.1 (Contenu non textuel, niveau A). La règle tient en une question : cet élément est-il purement décoratif ou porteur d'une information ? L'European Accessibility Act (norme EN 301 549 / WCAG 2.1 AA), applicable au commerce électronique depuis le 28 juin 2025, impose :
- Le décoratif est masqué — une image de fond ou une icône d'ornement est ignorée des technologies d'assistance (
aria-hidden, CSS), elle n'ajoute rien à comprendre ; - L'informatif a un équivalent texte — toute information portée par une image de fond, un SVG ou une icône doit aussi exister en texte (1.1.1) ;
- Un bouton à icône seule est nommé — une icône « panier » ou « loupe » sans texte doit avoir un nom accessible (4.1.2) ;
- Pas de texte enfermé dans une image — un message important ne s'écrit pas dans une bannière en image (1.4.5), et un symbole seul ne porte jamais une info à lui tout seul (1.4.1).
Comme partout, tout relève ici du socle de niveau A et AA : aucun critère AAA « de confort » en jeu. Ces règles sont exigées. Cette page complète celle sur l'attribut alt des images produit : ici on traite ce qui n'est pas une balise <img> — le fond, les icônes, les symboles.
Un site n'est pas fait que de texte et de photos produit. Il est rempli de contenu non textuel qui n'est pas une simple <img> : des images posées en fond par le CSS, des icônes de police (le pictogramme panier, la loupe de recherche), des SVG inline, des emoji et des symboles. Chacun pose la même question d'accessibilité, et c'est exactement là que beaucoup de sites trébuchent : soit ils polluent le lecteur d'écran avec des décorations inutiles, soit ils cachent une vraie information dans un élément que l'assistance ne peut pas lire. Voici les six règles à appliquer, ce que l'EAA exige précisément, et comment vérifier. Pour le texte de remplacement des images produit proprement dites, voyez le guide dédié à l'attribut alt.
La seule question qui compte : décoratif ou informatif ?
Le critère 1.1.1 (Contenu non textuel) demande que tout élément non textuel ait une alternative textuelle qui remplit la même fonction — sauf s'il est purement décoratif, auquel cas il doit pouvoir être ignoré par les technologies d'assistance. Avant de coder, posez-vous donc une seule question pour chaque visuel : « si je le retire, est-ce que je perds une information ? »
- Non, c'est purement esthétique (une texture de fond, un trait décoratif, une icône qui double un mot déjà écrit) : il faut le rendre invisible à l'assistance — image posée en CSS
background, ouaria-hidden="true"sur l'icône. - Oui, il porte une information (un logo de moyen de paiement, un drapeau qui sert de sélecteur de langue, une icône « rupture de stock », un message en image) : il faut un équivalent texte qui dit la même chose.
L'EAA s'appuie sur l'EN 301 549, fondée sur les WCAG 2.1 niveau AA. Les critères mobilisés ici sont des fondations : 1.1.1 (contenu non textuel), 1.4.1 (utilisation de la couleur), 1.4.5 (texte sous forme d'image), 1.4.3 (contraste) et 4.1.2 (nom, rôle, valeur) pour les contrôles à icône.
Les 6 règles pour le contenu non-texte
La bonne réponse dépend de la fonction, pas du format
Un même visuel peut être décoratif sur une page et informatif sur une autre. Une coche verte qui double le mot « En stock » déjà écrit est décorative ; la même coche seule, sans le mot, devient porteuse de sens. La règle : si l'information existe déjà en texte à côté, le visuel peut être masqué ; sinon, il doit fournir l'équivalent. Ne laissez jamais un élément non textuel dans un état ambigu, ni lu de travers par le lecteur d'écran, ni muet alors qu'il porte une info (critère 1.1.1).
✓ En stock » où la coche est aria-hidden et le mot « En stock » est lu ; rien n'est perdu.→ Voir aussi le texte alternatif des images produit.
Une bannière, un logo ou un message ne se cachent pas dans un background
Une image posée en CSS (background-image) est, par construction, invisible aux technologies d'assistance : c'est parfait pour une texture, un dégradé, une photo d'ambiance. Mais c'est un piège si l'image porte une information : une bannière promotionnelle « −20 % ce week-end » mise en fond, un logo de marque, un drapeau de sélection de langue. Cette information disparaît totalement pour qui ne voit pas l'image. La règle : le décoratif va en CSS ; tout ce qui informe passe par du vrai texte HTML (ou une <img> avec alt) visible de tous (critère 1.1.1).
background-image ; le titre « −20 % ce week-end » est du texte HTML par-dessus.→ Voir aussi le zoom et le texte en image.
Font Awesome & cie : décoratif → aria-hidden ; seul → nom accessible
Les icônes de police (Font Awesome, Material Icons…) et les icônes injectées par ::before sont des caractères : selon la police, le lecteur d'écran peut les annoncer par un glyphe absurde, un mot anglais, ou rien. Deux cas. Si l'icône accompagne un texte (un libellé « Panier » à côté), masquez-la avec aria-hidden="true". Si l'icône est seule dans un bouton ou un lien (la loupe de recherche, le pictogramme panier sans mot), elle porte la fonction : l'élément doit recevoir un nom accessible via aria-label (critères 1.1.1, 4.1.2).
<button aria-label="Rechercher"><i class="icon-search" aria-hidden="true"></i></button>.<button><i class="icon-cart"></i></button> seul : le bouton est annoncé « bouton » sans nom, ou avec un glyphe.→ Voir aussi les boutons à icône et leur nom accessible.
Le pictogramme dépend de ce qu'il représente
Un SVG inline suit la même logique. S'il est décoratif (un trait, un ornement, une icône qui double un mot), ajoutez aria-hidden="true" et, pour les icônes interactives héritées, focusable="false" (certains navigateurs anciens donnent le focus aux SVG). S'il porte une information (un pictogramme « livraison gratuite » sans texte, un logo), donnez-lui role="img" et un nom — un élément <title> en première position dans le SVG, ou aria-label. Sans cela, le SVG est soit ignoré (info perdue), soit lu par le contenu de ses balises internes (illisible) (critère 1.1.1).
<svg role="img" aria-label="Livraison gratuite">…</svg> ; décoratif : <svg aria-hidden="true" focusable="false">.role ni nom, ou un SVG décoratif laissé lisible qui annonce ses coordonnées de tracé.→ Voir aussi les repères et la structure.
Un emoji est lu à voix haute — et un symbole seul ne suffit pas
Un emoji a un nom annoncé par le lecteur d'écran (✅ se dit « coche blanche », ⭐ « étoile »). Utilisé avec parcimonie comme renfort, il est acceptable ; mais ne faites jamais reposer une information essentielle sur un emoji ou un symbole seul, car son nom lu peut être déroutant ou répété. Cas fréquent en e-commerce : une note en étoiles. Cinq caractères ★ d'affilée s'annoncent « étoile étoile étoile… » sans donner la note. Doublez toujours d'un texte : « Note : 4 sur 5 ». De même, un symbole de couleur (un rond, une pastille) ne porte pas une info à lui seul (critères 1.1.1, 1.4.1).
Note : 4 sur 5 » en texte, les étoiles décoratives étant aria-hidden.★★★★☆ » seul pour la note : le lecteur d'écran récite des étoiles sans jamais dire « 4 sur 5 ».→ Voir aussi l'usage de la couleur.
Le texte intégré à une image n'est ni lisible, ni zoomable, ni contrasté
Le critère 1.4.5 (Texte sous forme d'image, niveau AA) demande de privilégier le vrai texte au texte intégré dans une image (sauf logo ou cas où la présentation est essentielle). Un message écrit dans une image — slogan, prix, conditions d'une promo — ne peut pas être lu par l'assistance, devient flou au zoom, et son contraste n'est pas vérifiable. Préférez du texte HTML stylé en CSS. Et lorsque vous superposez du texte à une image de fond, vérifiez son contraste sur toute la surface (un voile assombrissant aide), car une image claire peut rendre le texte illisible par endroits (critères 1.4.5, 1.4.3).
→ Voir aussi le contraste des couleurs et le redimensionnement.
Récapitulatif : décoratif ou informatif, tout est du socle
| Point à vérifier | Niveau | Statut EAA |
|---|---|---|
| Distinguer décoratif (masqué) et informatif (équivalent texte) — 1.1.1 | A | Exigé |
| Image de fond CSS : info jamais enfermée dans un background — 1.1.1 | A | Exigé |
| Icône de police seule dans un contrôle : nom accessible — 1.1.1 / 4.1.2 | A | Exigé |
| SVG : aria-hidden si décoratif, role="img" + nom si informatif — 1.1.1 | A | Exigé |
| Emoji / symbole jamais seul porteur d'une information — 1.1.1 / 1.4.1 | A | Exigé |
| Vrai texte plutôt que texte en image, contraste garanti — 1.4.5 / 1.4.3 | AA | Exigé |
aria-label="Rechercher" (ou « Voir le panier ») sur le bouton, et aria-hidden="true" sur l'icône à l'intérieur pour qu'elle ne soit pas lue deux fois. C'est l'un des défauts les plus fréquents — et les plus simples à corriger — d'un en-tête de boutique.
Comment vérifier votre contenu non-texte
Quelques contrôles concrets :
- Parcourez l'en-tête et les contrôles au lecteur d'écran : chaque bouton à icône (recherche, panier, compte, favoris) est-il annoncé avec un nom clair ?
- Repérez le texte enfermé dans des images : une bannière, une promo, un prix sont-ils du vrai texte (sélectionnable, net au zoom 200 %) ou une image ?
- Écoutez les notes et badges : une note en étoiles annonce-t-elle « 4 sur 5 », ou récite-t-elle des « étoile » ?
- Coupez les images (ou les images de fond) : une information disparaît-elle ? Si oui, elle était mal placée.
Une partie de ces points se prête à la détection automatique : un scanner repère un bouton ou un lien sans nom accessible, une image sans alternative, un SVG sans nom. En revanche, juger si une image de fond aurait dû porter un texte, ou si un emoji est de trop, demande un regard humain : l'outil ne connaît pas l'intention. Notre rapport signale les manquements détectables sur la page analysée et liste les vérifications manuelles à mener.
→ Méthode complète : comment tester l'accessibilité de son site. Voir aussi par où commencer.
Vérifiez l'accessibilité de votre boutique gratuitement
DeclareAccess analyse une page de votre site avec le moteur axe-core selon les WCAG 2.1 AA, repère les manquements (boutons à icône sans nom, images sans alternative, contraste, texte en image…) et génère la déclaration d'accessibilité prête à publier — modèle français (RGAA), allemand (BFSG), italien ou espagnol. Gratuit, sans carte bancaire.
Rapport WCAG par e-mail sous 24 h ouvrées.
C'est noté. Votre client e-mail va s'ouvrir avec la demande pré-remplie — il vous suffit de l'envoyer.
Questions fréquentes
Une image de fond CSS doit-elle avoir un texte alternatif ?
Non si elle est purement décorative : une image posée en background-image est par nature ignorée des technologies d'assistance, ce qui est exactement le comportement attendu pour un décor. En revanche, si l'image porte une information (une promo, un logo, un drapeau de sélection de langue), cette information doit exister ailleurs en texte HTML ou via une <img> avec alt. Le critère est 1.1.1 (Contenu non textuel, niveau A).
Comment rendre une icône de police accessible ?
Cela dépend de son rôle. Si l'icône accompagne un texte visible (un libellé « Panier » à côté), ajoutez aria-hidden="true" pour qu'elle ne soit pas lue. Si l'icône est seule dans un bouton ou un lien (loupe, panier, cœur), l'élément doit recevoir un nom accessible avec aria-label, et l'icône à l'intérieur garde aria-hidden="true". Ce sont les critères 1.1.1 et 4.1.2 (Nom, rôle, valeur, niveau A).
Quelle est la différence avec le guide sur l'attribut alt ?
Le guide sur l'attribut alt traite les balises <img> — les photos de produit, les visuels insérés dans le contenu. Cette page traite le reste du contenu non textuel : les images posées en fond par le CSS, les icônes de police, les SVG inline, les emoji et les symboles. La logique de fond est commune (décoratif ou informatif ?, critère 1.1.1), mais les techniques diffèrent selon le format.
Peut-on mettre du texte dans une image ?
À éviter. Le critère 1.4.5 (Texte sous forme d'image, niveau AA) demande de privilégier le vrai texte au texte intégré dans une image, sauf pour un logo ou lorsque la présentation est essentielle. Un texte en image ne peut pas être lu par l'assistance, devient flou au zoom et son contraste n'est pas vérifiable. Utilisez du texte HTML stylé en CSS ; si vous le superposez à une image de fond, garantissez son contraste (par exemple avec un voile assombrissant).
Une note en étoiles est-elle accessible ?
Pas si elle ne repose que sur des caractères ★. Le lecteur d'écran récite alors « étoile, étoile… » sans jamais donner la note. Doublez toujours d'un texte explicite, par exemple « Note : 4 sur 5 », et masquez les étoiles décoratives avec aria-hidden="true". C'est l'application des critères 1.1.1 (Contenu non textuel) et 1.4.1 (Utilisation de la couleur), tous deux de niveau A.