Si les styles graphiques de votre site sont désactivés, le contenu s'affiche-t-il dans un ordre de lecture logique ?
Critère officiel 10.3 — Dans chaque page web, l’information reste-t-elle compréhensible lorsque les feuilles de styles sont désactivées ?
Pourquoi c'est important
Certaines mises en page utilisent le CSS pour afficher des éléments dans un ordre visuel différent de leur ordre réel dans le code. Un logiciel de lecture suit l'ordre du code, pas l'ordre visuel. Si les deux divergent, l'utilisateur entend la barre latérale avant le contenu principal, ou le pied de page avant l'article.
Exemples concrets
Ce qui est conforme
La page d'accueil, vue sans styles, affiche dans l'ordre : logo, navigation, contenu principal, coordonnées. L'ordre du code reflète l'ordre logique de lecture — pas seulement l'ordre visuel obtenu par positionnement CSS.
Ce qui pose problème
Une page utilise CSS pour afficher deux colonnes côte à côte. Dans le code, la barre latérale est écrite avant le contenu principal. Sans styles, le logiciel de lecture lit une longue liste de liens de la barre latérale avant d'atteindre l'article — l'ordre de lecture est inversé.
Comment agir
Demandez à votre prestataire de tester la page principale sans feuilles de style (Firefox → Affichage → Style de la page → Aucun style). Vérifiez que le contenu s'affiche dans un ordre logique : navigation, puis contenu, puis pied de page. Si la barre latérale ou le pied de page apparaît avant le contenu, l'ordre du code doit être corrigé.
Règles clés
- L'ordre DOM doit suivre l'ordre logique de lecture : titre → contenu principal → sidebar → pied de page.
- Le test pratique : désactiver les CSS (extension Web Developer, ou DevTools > ...) et lire la page linéairement. Le sens est-il préservé ?
- Eviter de réordonner visuellement des blocs de contenu via CSS (flex order, grid-area) si cela crée une dissonance avec l'ordre DOM.
- Utiliser les éléments sémantiques HTML (<main>, <aside>, <nav>, <header>, <footer>) dans leur ordre logique dans le DOM.
Erreurs fréquentes
- Colonne de contenu principal après la colonne sidebar dans le DOM, alors que visuellement la sidebar est à droite
- Légende d'image placée avant l'image dans le DOM mais affichée après en CSS
- Navigation breadcrumb placée en fin de DOM pour des raisons de chargement différé mais affichée en haut de page
- Éléments positionnés en absolute ou fixed dont l'ordre DOM ne correspond pas à leur position visuelle
Exemples de code
DOM inversé par rapport à l'ordre visuel
✗ Non conforme<!-- DOM : sidebar avant main, pour des raisons historiques de CSS float -->
<div id="page">
<aside id="sidebar">Articles récents, catégories...</aside>
<main id="contenu">Article principal...</main>
</div>
<style>
#page { display: flex; }
#contenu { order: 1; flex: 1; } /* visuellement à gauche */
#sidebar { order: 2; width: 300px; } /* visuellement à droite */
</style>Visuellement, le contenu principal est à gauche et la sidebar à droite. Mais le lecteur d'écran lit d'abord la sidebar (première dans le DOM). L'ordre de lecture est incohérent avec l'ordre visuel et logique.
DOM dans l'ordre logique
✓ Conforme<!-- DOM : main avant aside — correspond à l'ordre de lecture logique -->
<div id="page" style="display: flex;">
<main id="contenu" style="flex: 1;">Article principal...</main>
<aside id="sidebar" style="width: 300px;">Articles récents...</aside>
</div>L'ordre DOM reflète l'ordre de lecture : contenu principal en premier, sidebar en second. Le flex layout place visuellement sidebar à droite sans inverser l'ordre de lecture.
Référence WCAG : 1.3.2, 2.4.3