Ordre séquentiel logique

Ce que ce critère demande

Si le sens du contenu dépend de l’ordre dans lequel il est lu — instructions, récit, processus étape par étape — cet ordre doit être préservé dans le DOM. Les lecteurs d’écran et les moteurs de reformatage parcourent le document dans l’ordre de la source ; si CSS order, position: absolute, flex-direction: row-reverse ou le placement dans la grille brouille l’ordre visuel par rapport à l’ordre du DOM, l’expérience se dégrade.

Comment satisfaire ce critère

• Rédiger le DOM dans l’ordre de lecture souhaité ; utiliser CSS pour le positionnement visuel, non pour créer la séquence.
• Vérifier tout usage de flex-direction: row-reverse, CSS order ou grid-area qui déplace du contenu hors de sa position dans la source.
• Pour les mises en page multi-colonnes, placer les colonnes dans le DOM dans l’ordre de lecture, non dans l’ordre visuel des colonnes.
• Tester en désactivant le CSS (outils de développement du navigateur, « afficher l’ordre de la source ») — le flux non stylisé doit toujours avoir du sens.
• Parcourir la page avec un lecteur d’écran et noter tout moment où l’ordre d’annonce est surprenant.

Échecs courants

• Une barre latérale visuellement à droite mais placée en premier dans le DOM — les lecteurs d’écran lisent publicités, liens connexes et appels à l’action avant l’article principal.
• flex-direction: row-reverse sur un menu de navigation — les utilisateurs voyants voient Accueil / À propos / Contact, les lecteurs d’écran entendent Contact / À propos / Accueil.
• CSS order sur des champs de formulaire réorganisant l’ordre visuel par rapport à l’ordre DOM, rendant la navigation par tabulation imprévisible.
• Lien « Aller au contenu » placé après la navigation dans le DOM mais positionné de façon absolue en haut visuellement — les utilisateurs au clavier atteignent d’abord la navigation.
• Cartes dans une grille qui s’affichent visuellement de gauche à droite mais sont placées dans le DOM de bas en haut en raison d’une astuce de grille.

Pourquoi c’est important

Les échecs d’ordre séquentiel logique sont insidieux — la page semble correcte, valide et réussit la plupart des vérifications automatisées. Ils ne se manifestent que lorsqu’un utilisateur réel de lecteur d’écran tente de lire la page de haut en bas. La plupart des corrections sont de petits réordonnements du DOM, mais le coût de diagnostic pour identifier le problème est élevé.