retour vers le site AccessiWeb

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é ?

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

Valeur ajoutée pour le site

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

Autres ressources

revenir en haut de la page


Fiche précédente : fiche 5.5 Fiche suivante : fiche 6.1

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