Dans chaque page web, le contenu visible porteur d’information reste-t-il présent lorsque les feuilles de styles sont désactivées ?
Certains utilisateurs appliquent leur propre feuille de styles pour adapter l’affichage : contraste élevé, police dyslexique, taille de texte augmentée. Quand un contenu informatif est généré uniquement par CSS, il disparaît pour eux. L’information était là visuellement, mais elle n’existait pas dans le HTML.
Le critère 10.2 cible précisément ce cas : tout contenu visible porteur d’information doit rester présent quand les CSS sont désactivées. Les cas de non-conformité les plus fréquents en audit sont les images de fond CSS informatives sans alternative textuelle, les icônes insérées via la propriété content des pseudo-éléments ::before / ::after sans texte caché, et les dessins réalisés entièrement en CSS.
Si votre bouton d’appel n’affiche qu’une icône téléphone insérée via content: ’\260E’ et aucun texte dans le HTML, l’utilisateur perd toute indication sur la fonction du bouton dès que le CSS est désactivé. Ce n’est pas une question de mise en page : c’est une perte d’information.
Pour auditer ce critère, utilisez l’extension Web Developer (Firefox ou Chrome), menu CSS > Disable All Styles, et comparez la page sans styles avec la version normale. Tout contenu informatif qui disparaît sans alternative dans le DOM est une non-conformité.
Un test pour vérifier que le contenu reste visible sans CSS
Contenu informatif visible sans CSS
- Désactivez toutes les feuilles de styles de la page (extension Web Developer : CSS > Disable All Styles).
- Comparez la page sans CSS avec la version normale.
- Pour chaque élément visible qui portait une information dans la version stylée, vérifiez qu’il est toujours présent dans la version sans CSS.
- Vérifiez en priorité : images de fond (
background-image) informatives, icônes viacontentsur::before/::after, dessins CSS informatifs. - Si un contenu informatif a disparu et n’a pas d’alternative dans le HTML (texte masqué,
aria-label, attributalt...) : le test échoue. - Si tous les contenus informatifs visibles restent présents : le test est validé.
Exemples
❌ Non conforme : Bouton avec icône uniquement insérée via CSS content
<style>
.btn-call::before {
content: '\260E';
font-size: 1.5rem;
}
</style>
<button class="btn-call"></button>L’icône téléphone est générée par CSS. Le bouton ne contient aucun texte dans le HTML. Sans CSS, le bouton est vide : l’utilisateur ne sait pas à quoi il sert. Le contenu informatif a disparu avec les styles.
❌ Non conforme : Logo en image de fond CSS sans alternative textuelle
<style>
.logo {
background-image: url('logo-entreprise.png');
width: 200px;
height: 80px;
display: block;
}
</style>
<a href="/" class="logo"></a>Le logo est une image de fond CSS. Sans CSS, le lien est complètement vide : ni image, ni texte. L’utilisateur ne sait pas où mène ce lien ni de quelle organisation il s’agit. Le critère 10.2 échoue, et le critère 1.1 (alternative textuelle) est probablement également en échec.
✅ Conforme : Logo en image de fond CSS avec texte masqué comme alternative
<style>
.logo {
background-image: url('logo-entreprise.png');
width: 200px;
height: 80px;
display: block;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
</style>
<a href="/" class="logo">
<span class="sr-only">Accueil, Entreprise XYZ</span>
</a>Le texte masqué via .sr-only reste dans le DOM HTML. Quand les CSS sont désactivées, ce texte redevient visible : l’utilisateur lit « Accueil, Entreprise XYZ ». L’information est préservée. Le lecteur d’écran la lisait déjà ; désormais l’utilisateur qui désactive les CSS y a également accès.
Astuces et pièges
⚠️ Confondre « mise en page cassée » et « contenu absent »
Le critère 10.2 ne demande pas que la page reste lisible visuellement sans CSS. Il demande que les informations visibles dans la version stylée soient encore présentes dans le DOM. Un logo qui se redimensionne de travers sans CSS : pas un échec. Un logo qui disparaît parce qu’il était une image de fond CSS sans alternative : échec.
⚠️ Les icon fonts (Font Awesome, Material Icons) sont systématiquement concernées
Les icon fonts utilisent content sur un pseudo-élément pour afficher le glyphe. Sans CSS, l’icône disparaît ou affiche un caractère illisible. Si l’icône est le seul vecteur de l’information, il faut une alternative dans le HTML : texte masqué adjacent, aria-label sur l’élément interactif parent, ou title si c’est un lien.
⚠️ La propriété content CSS n’est pas bien restituée par tous les lecteurs d’écran
Même avec les CSS actives, une icône insérée via ::before et content n’est pas annoncée de manière fiable. NVDA avec Firefox la restitue parfois, VoiceOver sur Safari ne le fait pas systématiquement. L’alternative textuelle reste indispensable pour tout contenu informatif, indépendamment du critère 10.2.
💡 Le texte masqué résout à la fois le critère 10.2 et l’accessibilité aux technologies d’assistance
Un <span class="sr-only"> dans le HTML reste présent quand les CSS sont désactivées et devient visible. Le lecteur d’écran le lisait déjà dans la version stylée. Deux conformités assurées par une seule implémentation.
⚠️ Les contenus purement décoratifs ne sont pas visés
Une image de fond CSS uniquement esthétique (fond de section, séparateur graphique sans texte) n’entre pas dans le périmètre du critère 10.2. La question à se poser : « si cet élément disparaissait, l’utilisateur perdrait-il une information ? » Si non, il n’y a rien à préserver.
Questions fréquentes
Pourquoi le critère RGAA 10.2 protège-t-il les utilisateurs qui naviguent sans feuilles de style ?
Rarement de manière totale. En revanche, les extensions de personnalisation d’affichage (contraste élevé, dyslexie) écrasent certaines propriétés CSS sans toucher à content. La portée pratique du critère est donc plus étroite que son intitulé ne le laisse penser. Cela dit, les icônes générées par content sont aussi mal restituées par certains lecteurs d’écran avec les CSS actives. L’alternative textuelle reste nécessaire dans tous les cas.
Comment vérifier le critère RGAA 10.2 lors d'un audit d'accessibilité ?
Utilisez l’extension Web Developer (Firefox ou Chrome) : CSS > Disable All Styles. Comparez ensuite avec la version normale et cherchez en priorité les images de fond (background-image) informatives, les icônes sur ::before / ::after, et les éléments sans texte HTML. Pour identifier les candidats avant de désactiver les styles, inspectez les pseudo-éléments dans les DevTools : tout content non vide sur un élément interactif ou informatif est suspect.
Quand un logo en image de fond CSS doit-il être migré vers une balise <img> ?
Non, pas obligatoirement. Vous pouvez conserver l’image de fond CSS et ajouter un texte masqué dans le HTML (<span class="sr-only">Nom de l’organisation</span>). Migrer vers <img alt="..."> est une autre solution valide, souvent plus propre sémantiquement. Les deux approches satisfont le critère 10.2.
Quelle différence entre le critère RGAA 10.2 et le critère 1.1 sur les alternatives textuelles ?
Le critère 1.1 concerne les images HTML (<img>, SVG, <canvas>...) et leur alternative pour les technologies d’assistance, CSS actives ou non. Le critère 10.2 concerne les contenus générés par CSS qui disparaissent physiquement quand les styles sont désactivés. Une image de fond informative sans alternative viole généralement les deux : absence de contenu sans CSS (10.2) et absence d’alternative pour les technologies d’assistance (1.1).
Comment le critère RGAA 10.2 s'applique-t-il aux éléments SVG inline ?
Non. Un SVG inline fait partie du DOM HTML : il reste présent quand les CSS sont désactivées. En revanche, si ce SVG est informatif et n’a pas de <title> ou d’aria-label, il tombe sous le coup du critère 1.1. Le critère 10.2 ne s’applique qu’aux contenus générés ou affichés exclusivement via CSS.