Comment conserver un ordre séquentiel logique (WCAG 1.3.2)

Explication générale #

Le but du critère WCAG 1.3.2 est de s'assurer que, si l'ordre du contenu est important, alors, celui-ci doit être préservé quelle que soit la manière dont il est présenté à l'utilisateur. Par exemple, lorsque le CSS est désactivé ou lors de l'utilisation d’un lecteur d'écran.

L'ordre d'un contenu est important dès lors que l'ordre du contenu ne peut pas être modifié sans en affecter sa signification.
Par exemple, pour une liste ordonnée ou un tableau, l'ordre du contenu est important, en revanche pour une liste non-ordonnée, l'ordre de lecture n’a pas d’impact sur la compréhension de l'utilisateur.

Une page WEB peut être composée de plusieurs sections indépendantes ayant des rôles spécifiques. Les positions relatives d'une section de navigation et une section principale de page, n'affectent généralement pas la compréhension du contenu de la page. Que la navigation soit, en haut ou à gauche de l’écran, ne gêne pas la compréhension, même si un ordre de lecture peut être imposé à l’intérieur d’une de ces sections.
Il peut donc exister plusieurs ordres de lecture sur une page WEB pour satisfaire ce critère.

Ce qu'il ne faut pas faire #

Utiliser des espaces blancs pour formater du texte brut #

Pour présenter du contenu, il est important de ne pas utiliser des caractères d'espacement, comme les espaces, la tabulation, le saut de ligne ou le retour chariot.
Dans certains cas, ces caractères sont utilisés pour formater des tableaux, ou reproduire des colonnes de données dans un contenu textuel. Cette méthode est proscrite, car les technologies d'assistances ne se verront pas présenter les informations dans un ordre de lecture logique, les informations retournées à certains utilisateurs seront donc incompréhensibles.

Ci-dessous, deux exemples qui ne sont pas valides et donc pas compréhensible avec un lecteur d'écran.

Exemple de caractère d'espacement pour formater un tableau #


Horaires de travail avec Salle de classe
 
                                                         
            Lundi                Mardi             Mercredi     

 Matin      9H30-13H             9H30-13H          8H-12H     
            B201                 B201              A001

 Après-     14h-17h              14h-17h           Repos
 Midi       A103                 B201

On remarque, que la présentation ci-dessus est un formatage uniquement visuel, mais aucune relation sémantique ne permet de représenter les relations tabulaires.
Les technologies d'assistance vont lire le contenu au fur et à mesure qu'il apparait dans le code, donc, dans un ordre illogique et incompréhensible. Ici, la solution serait d'utiliser un tableau ou présenter les informations de manière linéaire.

Exemple de caractère d'espacement pour séparer du contenu en deux colonnes #

L’accessibilité numérique vise à rendre possible    il ne s’agit pas de démultiplier les
l’accès à l’information numérique quelle que soit    supports de l’information, mais de
la nature du handicap des personnes et la façon     respecter des règles fonctionnelles, graphiques,
dont chacun consulte l’information. Elle concerne     techniques et éditoriales qui permettront à tous
différentes technologies comme le Web, les vidéos     d’accéder à l’information quels que soient leurs
et les documents Word et PDF, mais également la     outils de consultation.
télévision numérique ou les téléphones mobiles.    

Le paragraphe ci-dessus n'est pas conforme, des caractères d'espacement sont utilisés pour séparer le texte en deux colonnes. Les technologies d'assistance liront le texte ligne par ligne ce qui serait un ordre de lecture illogique.

Utiliser un tableau de mise en page #

Même si les WCAG n'interdisent pas l'utilisation des tableaux de mise en page, il est recommandé d'utiliser la mise en page en CSS afin de conserver une sémantique au contenu. Si un tableau de mise en page est utilisé, il est important que le contenu ait un sens lorsqu'il est linéarisé.

Les tableaux présentent le contenu de manière horizontale et verticale, cependant une technologie d'assistance lit ce contenu de manière linéaire, le tableau est lu de haut en bas en lisant l'intégralité de la ligne avant de passer à la suivante.

C'est pour cela qu'il faut faire attention lorsqu'on utilise un tableau de mise en page, à bien vérifier que le contenu soit également compréhensible avec un lecteur d'écran.

Exemple d'un tableau non-valide #

Le tableau ci-dessus permet d'afficher un menu, avec le logo sur le côté.

Le problème est qu'au lecteur d'écran l'ordre de lecture est différent de celui affiché, car au lieu d'énoncer tous les liens du menu, l'image sera vocalisée au milieu de ceux-ci.

Utiliser du CSS pour positionner l'information #

Pour positionner du contenu dans un ordre de lecture, il est recommandé d'utiliser le balisage sémantique, plutôt que les propriétés de positionnement du CSS. Ce dernier peut engendrer des erreurs, car le contenu peut s'afficher / être interprété dans un ordre différent de celui du code source.

Donc, si l'ordre de lecture est important, prudence lors de l'utilisation des CSS Flexbox, grid et position à ne pas modifier l'ordre du contenu visuellement par rapport à sa position dans le code.

  • Avec CSS flexbox, évitez d'utiliser la propriété order ou flex-direction:reverse;
  • Avec CSS grid, faites attention au placement manuel des éléments sur la grille
  • Avec les propriétés de positionnement, évitez de détacher l'ordre visuel des éléments de l'ordre dans lequel ils apparaissent dans le DOM

Si un utilisateur désactive le CSS, ou utilise un lecteur d'écran la restitution de l'information ne sera plus dans le bon ordre.

Exemple d'un menu positionner en CSS #

La mise en page ci-dessous a été créée avec du CSS, si vous désactivez le CSS, vous allez remarquer que le sens de lecture sera différent de celui affiché.

Sports Produit Football Tennis Rugby Vêtements Accessoires

Exemple d'onglet où le contenu est positionné avant #

Dans l'exemple ci-dessous, des onglets et leur contenu sont affichés et positionné avec flexbox.

Vous voilà présent sur l'onglet Accueil.
Vous voilà présent sur l'onglet Profil.

Les éléments sont placés avec l'attribut order, pour modifier l'ordre d'affichage par rapport à celui du DOM.
En désactivant le CSS ou au lecteur d'écran, on constate que les onglets sont lus après leur propre contenu.