Dans chaque page web, l’information reste-t-elle compréhensible lorsque les feuilles de styles sont désactivées ?
Désactivez les styles de votre navigateur et regardez ce qui se passe : les éléments restent dans l’ordre où ils sont écrits dans le HTML. C’est cet ordre que les lecteurs d’écran utilisent, que la navigation au clavier suit, et que voient les utilisateurs dont le CSS n’a pas chargé. Si votre page a besoin du CSS pour être comprise, elle échoue au critère 10.3.
Le critère teste avant tout l’ordre de lecture. CSS permet de réorganiser visuellement le contenu : la propriété order en flexbox ou en grid, position: absolute, float. Ces techniques déplacent des éléments à l’écran sans toucher au DOM. Résultat : un utilisateur de lecteur d’écran lit les étapes dans l’ordre 3, 1, 2 pendant qu’un utilisateur voyant les lit dans l’ordre 1, 2, 3. Ce n’est pas une nuance, c’est une rupture de sens.
Concrètement, l’ordre de vos éléments HTML doit correspondre à l’ordre logique de lecture. Titres avant leurs paragraphes. Questions avant leurs réponses. Étapes de formulaire dans l’ordre d’exécution. Si vous utilisez CSS pour repositionner des blocs, vérifiez que la version sans styles reste cohérente.
Un test pour s'assurer que le contenu reste compréhensible sans CSS
Ordre de lecture sans CSS
- Désactivez les feuilles de styles de la page (via l’extension Web Developer → CSS → Désactiver tous les styles, ou dans Firefox via Affichage → Style de la page → Aucun style).
- Lisez le contenu de haut en bas dans l’ordre où il apparaît.
- Vérifiez que la séquence reste logique : les titres précèdent leurs contenus, les instructions apparaissent avant les champs qu’elles décrivent, les étapes numérotées sont dans l’ordre croissant.
- Si la suppression des styles crée une ambiguïté ou un contresens, le test échoue.
Exemples
❌ Non conforme : Étapes de processus réordonnées par CSS order
<style>
.steps { display: flex; flex-direction: column; }
.step-1 { order: 1; }
.step-2 { order: 2; }
.step-3 { order: 3; }
</style>
<div class="steps">
<p class="step-3">Étape 3 : validez votre commande.</p>
<p class="step-1">Étape 1 : ajoutez des articles au panier.</p>
<p class="step-2">Étape 2 : renseignez vos coordonnées.</p>
</div>Visuellement, les étapes s’affichent dans l’ordre 1-2-3 grâce à la propriété order. Mais dans le DOM, l’ordre est 3-1-2. Un lecteur d’écran lit « Étape 3 » en premier. Un utilisateur sans CSS voit les étapes dans le mauvais ordre, rendant le processus incompréhensible.
✅ Conforme : Étapes de processus dans l’ordre logique du DOM
<style>
.steps { display: flex; flex-direction: column; }
</style>
<div class="steps">
<p>Étape 1 : ajoutez des articles au panier.</p>
<p>Étape 2 : renseignez vos coordonnées.</p>
<p>Étape 3 : validez votre commande.</p>
</div>L’ordre dans le HTML correspond à l’ordre logique de lecture. CSS peut s’appliquer ou non, la séquence reste cohérente pour tous les utilisateurs, y compris ceux qui utilisent un lecteur d’écran ou naviguent au clavier.
Astuces et pièges
⚠️ La propriété order en flexbox et grid est la première source d’échec
Les développeurs utilisent order pour ajuster la mise en page responsive sans modifier le HTML. En apparence, ça fonctionne. Mais chaque order modifié crée un écart entre l’ordre visuel et l’ordre DOM. En audit, c’est l’erreur la plus fréquente sur ce critère.
💡 Distinguer 10.2 et 10.3 : visibilité versus ordre
Le critère 10.2 vérifie que le contenu visible reste présent (ou a une alternative) quand les styles sont désactivés. Le critère 10.3 vérifie que l’ordre du contenu reste compréhensible. Deux vérifications séparées à mener lors d’un audit.
⚠️ position: absolute sort un élément du flux normal
Un élément en position: absolute ou fixed est placé visuellement selon ses coordonnées CSS, mais sa position dans le DOM reste inchangée. Si vous positionnez un titre d’article après son texte dans le HTML, il peut apparaître avant visuellement — et tromper les utilisateurs de lecteurs d’écran.
💡 L’ordre de tabulation suit le DOM, pas l’ordre visuel
Le critère 10.3 est directement lié au WCAG 2.4.3 (Focus Order). Quand CSS réordonne des éléments interactifs, la navigation au clavier ne suit pas cet ordre visuel. L’utilisateur passe d’un bouton à un autre dans un ordre qui ne correspond pas à ce qu’il voit à l’écran.
⚠️ La mise en avant purement décorative n’est pas une non-conformité
Si CSS met en avant un contenu de façon décorative (couleur, taille, encadré) sans que cela change le sens du texte, le critère 10.3 n’est pas concerné. C’est l’ordre des éléments dans le DOM qui est évalué, pas leur apparence visuelle.
Questions fréquentes
Comment désactiver le CSS pour tester le critère RGAA 10.3 ?
Trois méthodes : (1) l’extension Web Developer → CSS → Désactiver tous les styles — c’est la plus rapide en audit ; (2) dans Firefox, menu Affichage → Style de la page → Aucun style ; (3) dans les DevTools, désactivez manuellement les feuilles de styles dans l’onglet Sources. La première option est recommandée pour sa rapidité.
Pourquoi l'utilisation de grid-template-areas peut-elle faire échouer le critère 10.3 ?
Pas nécessairement. Si grid-template-areas place les blocs dans le même ordre logique que le DOM, le critère est respecté. Le problème survient quand la grille inverse ou mélange l’ordre des blocs de contenu. Testez toujours en désactivant les styles pour vérifier que la séquence reste cohérente.
Qu'est-ce qui distingue le critère RGAA 10.3 du critère WCAG 1.3.2 ?
Le WCAG 1.3.2 (Meaningful Sequence) pose le principe : l’ordre de lecture déterminé par le code doit préserver le sens. Le critère RGAA 10.3 l’opérationnalise avec une méthode de test concrète : désactiver les CSS et vérifier la compréhension. Le WCAG 2.4.3 (Focus Order) s’applique également dès que des éléments interactifs sont concernés par un réordonnancement CSS.
Comment la classe CSS sr-only est-elle évaluée dans le critère RGAA 10.3 ?
Non, à condition que ce texte s’insère logiquement dans la séquence de lecture. Quand les styles sont désactivés, un texte sr-only devient visible. S’il apparaît à un endroit cohérent dans le flux du contenu, le critère est respecté. Si sa position dans le DOM crée un contresens ou une rupture de lecture, c’est une non-conformité.