3.2.1 Le contenu de la page suit un ordre logique

La page doit être compréhensible lorsque les feuilles de style sont désactivées et que les tableaux sont linéarisés.

Pourquoi?

Un utilisateur de lecteur d'écran lira la page de manière linéarisée. Un autre visiteur visualisera peut-être la page sans feuilles de style, par exemple, parce que son navigateur ne le permet pas ou parce que le contraste proposé ne lui convient pas. Dans tous les cas, l'information doit quand même être présentée au visiteur de manière compréhensible et logique.

En pratique

Si vous n'utilisez pas de tableaux pour la mise en page et que le code source suit l'ordre de lecture visuel de la page, vous êtes automatiquement en accord avec cette directive.

Ordre du code source et ordre visuel

L'information peut prendre un sens différent lorsqu'elle est présentée dans un ordre différent. Ceci est bien illustré dans l'article de WebAIM sur les tableaux accessibles, Creating Accessible Tables

Si des parties de la page sont positionnées au moyen de CSS, cela peut influencer visuellement l'ordre des éléments div dans le code source. L'ordre dans le code source n'est pas toujours le même que l'ordre visuel. Les lecteurs d'écran et les navigateurs/machines qui ne supportent pas CSS, affichent ou lisent les différentes parties de la page dans l'ordre dans lequel elles apparaissent dans le code source.

Veillez à ce que l'information soit compréhensible indépendamment de la construction visuelle de la page et que les éléments html soient regroupés logiquement dans le code html.

Veillez à ce qu'aucun bloc d'information ne se retrouve découpé en morceaux après linéarisation et qu'aucune information ne soit placée là où on ne l'attendrait pas. Par exemple, ne placez pas la navigation entre le titre d'un article et l'article auquel il se rapporte. Ne placez pas de champs à remplir après le bouton d'envoi d'un formulaire. Et placez toujours le div de bas de page à la fin du code source.

La linéarisation des tableaux

Les tableaux doivent être compréhensibles lors de leur lecture linéaire. Ceci est décrit en détail dans la directive : les tableaux sont compréhensibles lors de leur lecture linéaire.

Imaginez que toutes les balises des tableaux html disparaissent. Les lecteurs d'écran ou les programmes d'aide qui ne peuvent pas afficher les tableaux placent le contenu de chaque cellule sur une nouvelle ligne (ou les lisent l'une à la suite de l'autre). L'ordre de ces lignes est celui de l'ordre des cellules (th et td) dans le code source de la page. Il faut que le tableau soit compréhensible lorsqu'il est lu de cette manière.

Les tableaux de mise en page

Les éléments table, tr et td sont destinés en principe à organiser des données de manière telle que les en-têtes expliquent le contenu des rangées et des colonnes. Certains utilisent ces mêmes balises pour créer une grille invisible qui leur permet de placer de manière précise les différentes parties de la page. C'est ce qu'on appelle un tableau de mise en page.

Un tel tableau ne sera peut-être pas perçu visuellement mais sera "vu" par un lecteur d'écran, qui commencera par annoncer le nombre de colonnes et de lignes puis le lira de manière linéaire. Lorsqu'un tableau de mise en page est linéarisé, il se peut que l'information ne soit plus présentée dans un ordre logique.

L'utilisation de tableaux de mise en page est permise mais pas encouragée. IL n'est pas permis d'utiliser des balises sémantiques (th, caption) dans un tableau de mise en page.

Exception permise

Si vous voulez optimiser votre page pour les lecteurs d'écran, le clavier, la reconnaissance vocale et d'autres aides, vous pouvez éventuellement faire dévier l'ordre de lecture de la structure visuelle.

Vous pourriez, par exemple, vouloir placer le menu de sélection de la langue en premier dans l'ordre de tabulation, alors que visuellement il se trouve à gauche de la page et serait donc lu après tous les liens situés à droite.

comment tester

Vérifiez que la page est toujours compréhensible et a la même signification après avoir désactivé les feuilles de style.

Firefox: Web Developer toolbar

  • CSS > Désactiver les styles CSS > Tous les styles
  • Divers > Linéariser la page.

IE: AIS Accessibility toolbar

CSS > Disable CSS