Aller au contenu principal
Mynto
AccessibiliteRGAA 10.2Niveau APrésentation de l'information

Contenu non visible sans CSS

Le critère RGAA 10.2, niveau A, impose que le contenu visible d'une page reste accessible même quand les feuilles de styles sont désactivées. Si une information clé disparaît sans CSS, elle n'est pas accessible à tous.

C'est quoi

Le contenu d'une page web peut être affiché via HTML (texte, images avec alt) ou via CSS (images de fond, pseudo-éléments ::before/::after).

Quand CSS est désactivé ou non chargé - navigateur texte (Lynx, eLinks), CSS non chargé suite à une erreur réseau, ou utilisateur qui désactive manuellement les styles - le contenu CSS-only disparaît.

Les situations problématiques courantes :

  • Une image de fond (background-image) qui porte une information (graphique, icône de statut, carte).
  • Du texte injecté via content: "..." dans un pseudo-élément CSS.
  • Un visuel important affiché uniquement via background-image sur un <div> sans texte alternatif dans le HTML.

Qui est touché

  • Les personnes utilisant des navigateurs texte (Lynx, eLinks) qui n'appliquent pas les CSS et n'affichent donc pas les images de fond ni les pseudo-éléments.
  • Les personnes qui désactivent manuellement les feuilles de style pour améliorer leur expérience (haut contraste, lisibilité).
  • Les robots d'exploration qui ignorent les CSS (impact SEO indirect possible).

Impact business

Les lecteurs d'écran n'exposent pas le contenu des pseudo-éléments CSS (::before, ::after) de façon uniforme selon les technologies et versions. Un contenu porté uniquement par ces mécanismes peut être totalement muet pour un utilisateur de lecteur d'écran.

Les images de fond informatives sont invisibles pour les lecteurs d'écran et pour tout utilisateur dont le navigateur ne charge pas les styles, que ce soit par choix ou par contrainte technique.

Sources des chiffres

Comment le détecter

  • Audit Mynto : le scanner détecte les images de fond sur des éléments non décoratifs et les pseudo-éléments contenant du texte informatif.
  • Manuel : utilise l'extension "Web Developer" (Chrome/Firefox) et désactive les styles (CSS > Disable All Styles). Parcours la page et vérifie que toute l'information reste présente dans le DOM.
  • DevTools : dans le panneau Styles, cherche background-image ou content: sur des éléments qui semblent porter de l'information.

Comment corriger

Avant - HTML
<!-- Graphique informatif affiché via CSS background uniquement -->
<div class="carte-statut carte-statut--ok"></div>
<!-- CSS : .carte-statut--ok { background-image: url('statut-ok.png'); } -->
Après - HTML
<!-- Graphique remplacé par une image HTML avec texte alternatif -->
<div class="carte-statut">
  <img src="statut-ok.png" alt="Statut : validé">
</div>

Pour les images de fond informatives, utilise une balise <img> avec un attribut alt descriptif. Réserve les CSS background-image aux éléments purement décoratifs.

Pour les textes dans ::before/::after :

  • Si le texte est décoratif (guillemets, flèches ornementales), laisse content: en place. N'ajoute aria-hidden="true" sur l'élément parent que si ce dernier n'a aucun autre contenu signifiant à exposer aux AT.
  • Si le texte est informatif, déplace-le dans le HTML.

Sur WordPress, vérifie les blocs Gutenberg et shortcodes qui insèrent des icônes via ::before. Certains thèmes utilisent des polices d'icônes dont les caractères Unicode sont illisibles sans CSS.

Questions fréquentes

Les images de fond décoratives sont-elles concernées ?

Non. Une image de fond purement décorative (texture, motif d'arrière-plan) ne transporte aucune information et n'a pas besoin d'alternative. Le problème concerne les images qui portent un sens : statut, graphique, carte, icône significative.

Les polices d'icônes (Font Awesome, etc.) sont-elles problématiques ?

Oui, si elles affichent une icône qui porte du sens sans alternative textuelle dans le HTML. Ajoute aria-label sur l'élément parent ou un <span> avec du texte masqué visuellement via .sr-only.

Ce critère est-il lié au critère RGAA 1.1 sur les images ?

Ils se complètent. RGAA 1.1 traite les images HTML sans attribut alt. RGAA 10.2 traite les informations portées uniquement par le CSS et donc absentes du HTML. Les deux doivent être respectés.

À lire aussi

Cette erreur est-elle sur ton site ?

Lance un audit Mynto gratuit. Tu sauras en quelques minutes si ton site est concerné, sur quelles pages, et avec quel impact.