# Guide AccessiWeb

vous êtes ici : Accueil > Fiches AccessiWeb : Tableaux > Fiche 5.6

## Fiche 5.6 : Dans un tableau de mise en forme, le contenu est-il correctement ordonné ?

Sommaire de la fiche :

- Carte d'identité
- Comprendre

- Comment évaluer
- Comment mettre en oeuvre

- Illustrations
- Références

### Carte d'identité

- Critère AccessiWeb : 5.6
- Niveau AccessiWeb : bronze
- Point(s) de contrôle WCAG 1.0 correspondants (Priorité 2 de WAI) : 5.3

revenir en haut de la page

### Comprendre

#### Bénéfices pour les utilisateurs

- Bénéfice 1 :
  Dans les tableaux de mise en forme, les informations doivent être ordonnées de telle manière qu'elles puissent être affichées dans un ordre équivalent lors d'une lecture linéaire de la page. En effet, la lecture du contenu d'un tableau de mise en forme avec des navigateurs textuels de type Lynx par exemple ou avec les logiciels de lecture d'écrans comme Jaws se fait de manière linéaire: cellule par cellule, de gauche à droite puis de haut en bas.
  L'organisation de l'information à l'intérieur d'un tableau de mise en page doit donc faire l'objet de beaucoup d'attention. Les outils actuels de développement HTML ont tendance à imbriquer les tableaux les uns dans les autres. Il en résulte parfois des différences entre le rendu visuel de l'information sur un navigateur graphique et le rendu linéaire fourni par un navigateur textuel ou par un lecteur d'écran. Cette différence entre les deux types d'affichage entraîne une lecture incohérente de la page pour certains utilisateurs.

#### Valeur ajoutée pour le site

- Bénéfice 1 :
  La présence de tableaux de mise en page ralentit son chargement.

revenir en haut de la page

### Comment évaluer

#### Par le code source

Ce critère n'est pas évaluable par le code source.

#### Par l'utilisation d'outils

Pour une liste complète des outils utilisés pour évaluer l'accessibilité des pages web, et un résumé de leurs principales fonctionnalités, reportez-vous à la page Outils d'aide à l'évaluation.

##### Evaluer avec la barre AccessiWeb (version 1.0) :

1. Sous Internet Explorer, ouvrir la page à analyser.
2. Dans le menu "5. Tableaux" de la Barre AccessiWeb, activer le critère 5.6.
3. La page est linéarisée (suppression des tableaux).
4. Comparer la présentation des contenus avant et après linéarisation.
   Note : Dans les tableaux de mise en forme, les informations doivent être ordonnées de telle manière qu'elles puissent être affichées dans un ordre équivalent lors d'une lecture linéaire de la page.
   Note : Pour supprimer la linéarisation, recharger la page en cliquant sur la touche F5.

##### Evaluer avec la barre d'accessibilité AIS pour Internet Explorer (version 1.2 en français) :

1. Cliquer sur l'option "Linéariser (Supprimer les tableaux)" du menu "Structure".
2. Comparer la présentation des contenus avant et après linéarisation.
   Note : Dans les tableaux de mise en forme, les informations doivent être ordonnées de telle manière qu'elles puissent être affichées dans un ordre équivalent lors d'une lecture linéaire de la page.

##### Evaluer avec la Barre d'Outils Web Developper pour Firefox (version 1.0.2 en français) :

1. Activer l'option "Linéariser la page" du menu "Divers".
2. Comparer la présentation des contenus avant et après linéarisation.
   Note : Dans les tableaux de mise en forme, les informations doivent être ordonnées de telle manière qu'elles puissent être affichées dans un ordre équivalent lors d'une lecture linéaire de la page.

##### Evaluer avec le lecteur d'écran Jaws (version 5 et 6.2 en français) :

1. Dès le chargement de la page, la lecture se fait automatiquement. Ecouter la page et vérifier que les informations sont lues dans le même ordre que lorsqu'elles sont lues à l'aide d'un navigateur graphique classique.
2. Il est possible de se faire une idée de l'ordre d'apparition des cellules du tableau en se déplaçant manuellement d'une cellule à l'autre à l'aide des flèches de direction "haut" et "bas". Les informations de chaque cellule sont alors prononcées par la synthèse vocale et affichées dans la fenêtre de l'afficheur braille.

revenir en haut de la page

### Comment mettre en oeuvre

#### Qui est concerné ?

Le développeur doit s'assurer que les informations contenues dans un tableau de mise en forme demeurent correctement ordonnées une fois linéarisées.

#### Implémentation

Il est préférable d'utiliser les feuilles de style pour la mise en page et le positionnement des éléments du contenu. Si les tableaux pour la mise en page sont cependant nécessaires, il faut s'assurer que le contenu du tableau est facile à comprendre lorsqu'il est linéarisé; c'est à dire que le contenu de chaque cellule est alors organisé en paragraphe l'un en dessous de l'autre, suivant l'ordre des cellules de gauche à droite puis de haut en bas.

#### Exemple de mauvaise pratique

Voici un exemple de tableau de mise en page qui pose problème lors de sa linéarisation (les bordures sont présentes uniquement pour montrer l'organisation des cellules) :

Ce tableau de mise en page pose des | Le contenu n'est donc pas cohérent
problèmes quand il est linéarisé. | pour certains utilisateurs.

Voici le code correspondant :

<table width="50%" summary="" border="1">
<tr>
<td width="25%" >Ce tableau de mise en page pose des</td>
<td width="25%" >Le contenu n’est donc pas cohérent </td>
</tr>
<tr>
<td width="25%">problèmes quand il est linéarisé.</td>
<td width="25%">pour certains utilisateurs.</td>
</tr>
</table>

Voici ce que lira un utilisateur avec un lecteur d'écran ou un navigateur non-visuel qui traite un tableau ligne par ligne :
"Ce tableau de mise en page pose des Le contenu n'est donc pas cohérent problèmes quand il est linéarisé. pour certains utilisateurs."

#### Exemple de bonne pratique

Il y a deux solutions pour que ce tableau puisse être linéarisé de façon cohérente:

1. En fusionnant les deux cellules de chaque colonne:

Ce tableau de mise en page pose des problèmes quand il est linéarisé. | Le contenu n’est donc pas cohérent pour certains utilisateurs.

Voici le code correspondant:

<table width="50%" summary="" border="1">
<tr>
<td width="25%" >Ce tableau de mise en page pose des problèmes quand il est linéarisé.</td>
<td width="25%" >Le contenu n’est donc pas cohérent pour certains utilisateurs.</td>
</tr>
</table>

2. En modifiant l'organisation du contenu dans les cellules:

Ce tableau de mise en page pose des | problèmes quand il est linéarisé.
Le contenu n’est donc pas cohérent | pour certains utilisateurs.

Voici le code correspondant:

<table width="50%" summary="" border="1">
<tr>
<td width="25%" >Ce tableau de mise en page pose des</td>
<td width="25%" >problèmes quand il est linéarisé. </td>
</tr>
<tr>
<td width="25%">Le contenu n'est donc pas cohérent</td>
<td width="25%">pour certains utilisateurs.</td>
</tr>
</table>

Le même rendu visuel peut être obtenu en utilisant une feuille de style:
Code dans le fichier HTML:

<div id="col1">Ce tableau de mise en page pose des problèmes quand il est linéarisé.</div>
<div id="col2">Le contenu n'est donc pas cohérent pour certains utilisateurs.</div>

Code dans la feuille de style:

#col1 {width:25% ; float:left;}
#col2 {width:25% ; float:left;}

revenir en haut de la page

### Illustrations

Note : pour lire les extraits sonores au format mp3 proposés sur ce guide, vous devez disposer d'un lecteur capable de lire ce type de fichier. Les enregistrements ont été réalisés à partir soit de la synthèse vocale utilisée par Jaws, soit celle utilisée par Home Page Reader. Pour plus d'informations sur le téléchargement de lecteurs de fichiers mp3, consulter le paragraphe Lecteurs multimédia de la page Outils d'aide à l'évaluation de ce guide.

Lecture par une synthèse vocale d'un tableau mal ordonné (format mp3, 124 ko)

Voici ce que Jaws dit :
"Ce tableau de mise en page pose des Le contenu n'est donc pas cohérent problèmes quand il est linéarisé. pour certains utilisateurs."

Lecture par une synthèse vocal d'un tableau bien ordonné (format mp3, 113 ko)

Voici ce que Jaws dit :
"Ce tableau de mise en page pose des problèmes quand il est linéarisé. Le contenu n'est donc pas cohérent pour certains utilisateurs."

revenir en haut de la page

### Références

#### Autres fiches à consulter

- Fiche 10.2 : Avec les feuilles de style désactivées, l'information est-elle toujours présente ?
- Fiche 10.3 : Avec les feuilles de style désactivées, l'ordre d'apparition de l'information est-il respecté par rapport à l'ordre d'apparition initialement défini ?
- Fiche 11.3 : Est-ce que la disposition des champs de formulaire par rapport aux textes qui leur sont associés ne pose aucune ambiguïté ?

#### Autres ressources

- html Techniques (section 5.2) : Tables for layout
- Web Content Accessibility Curriculum (section 5.4) : Do not use tables for layout unless the table makes sense when linearized
- Par Christophe Jablonski : Linéarisation du contenu

revenir au sommaire de la fiche

revenir en haut de la page

Guide AccessiWeb (version 2.1, 30 août 2006) | Conditions d'utilisation | Contact