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
- Tuile (card) dont les éléments visuellement prioritaires (titre, CTA) sont placés après le visuel dans l'ordre DOM uniquement pour des raisons graphiques : lors de la désactivation du CSS ou pour les technologies d'assistance, l'ordre de lecture ne correspond plus à l'ordre visuel. Les éléments sémantiquement importants (titre) doivent apparaître en premier dans le flux HTML ; l'ordre visuel peut être modifié ensuite via CSS (flex-order, position).
- CSS Grid Lanes (display: grid-lanes) : le navigateur place automatiquement chaque élément dans la colonne la plus courte à l'instant de son placement, produisant un ordre visuel qui ne correspond plus à l'ordre DOM dès que les hauteurs des items varient. Contrairement à un grid classique où l'ordre n'est perturbé que si le développeur place explicitement des éléments ou utilise la propriété order, Grid Lanes brise l'ordre par défaut de façon systématique. La propriété flow-tolerance permet d'atténuer le problème en définissant un seuil de différence de hauteur en dessous duquel les colonnes sont considérées comme égales, mais une valeur par défaut de 1em est souvent insuffisante sur des galeries d'images aux hauteurs très variées. La propriété CSS reading-flow (valeur grid-rows) est une solution future mais n'est à ce jour implémentée que dans les navigateurs Chromium et ne fonctionne pas encore avec Grid Lanes.
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