Ordre de lecture
L'ordre de lecture est la séquence dans laquelle les technologies d'assistance parcourent le contenu d'une page web. Cette séquence suit le code source HTML (le DOM), pas la mise en page visuelle. Quand le CSS réarrange les éléments à l'écran, l'ordre de lecture peut diverger de ce que l'utilisateur voit.
Trois colonnes s'affichent de gauche à droite sur votre écran. Un lecteur d'écran les parcourt dans le même sens. Ajoutez flex-direction: row-reverse et l'affichage s'inverse. Le lecteur d'écran, lui, continue dans l'ordre du HTML.
L'utilisateur voyant voit A-B-C. L'utilisateur au lecteur d'écran entend C-B-A.
#Pourquoi le CSS ne change pas l'ordre de lecture
Un lecteur d'écran ne lit pas les pixels. Il parcourt l'arbre d'accessibilité, construit à partir du DOM. Les propriétés order, flex-direction: row-reverse ou le placement explicite en grille modifient la position visuelle. Le DOM, lui, ne bouge pas.
Le critère 1.3.2 des WCAG (niveau A) le dit sans détour : quand l'ordre du contenu affecte sa compréhension, la séquence correcte doit être déterminable par programmation. Votre code source doit refléter un ordre logique, indépendamment du CSS appliqué.
La technique C27 résume la règle en une phrase : faites correspondre l'ordre du DOM à l'ordre visuel.
#Le piège classique : corriger avec tabindex
Quand la tabulation saute dans tous les sens après un réagencement CSS, le réflexe est d'ajouter des tabindex positifs pour forcer l'ordre.
<!-- Ne faites pas ça -->
<div tabindex="3">Premier visuellement</div>
<div tabindex="1">Troisième visuellement</div>
<div tabindex="2">Deuxième visuellement</div>Le tabindex positif crée un ordre de focus parallèle qui entre en conflit avec le DOM. Et il ne corrige que la navigation au clavier : un lecteur d'écran en mode lecture continue de suivre l'ordre du code source.
La bonne correction : restructurez votre HTML pour que l'ordre source corresponde à l'ordre visuel voulu. Si votre mise en page l'empêche, c'est la mise en page qu'il faut repenser.
#Et reading-flow ?
Le CSS Working Group travaille sur reading-flow, une propriété qui synchroniserait l'ordre de lecture avec la disposition flex ou grid. Chrome 137+ la supporte déjà, mais le reste des navigateurs n'a pas suivi.
Pour l'instant, la règle reste la même.
#En résumé
Le HTML dicte l'ordre de lecture. Le CSS ne change que l'affichage. Avant de réorganiser visuellement vos composants, désactivez les styles et vérifiez que votre page se lit toujours dans un ordre cohérent.