Guide AccessiWeb

Accueil
Mode d'emploi
Structure d'une fiche
Fiches AccessiWeb
- 1) Images
- 2) Cadres
- 3) Couleurs
- 4) Multimédia
- 5) Tableaux
- 6) Liens
- 7) Code exécutable
- 8) Eléments obligatoires
- 9) Structuration de l'information
- 10) Présentation de l'information
- 11) Formulaires
- 12) Navigation
- 13) Consultation
Glossaire
Aide à l'évaluation
Référentiel AccessiWeb
Tables de correspondance
Moteur de recherche
Références
Remerciements
Plan du guide

vous êtes ici : Accueil > Fiches AccessiWeb : Tableaux > Critère 5.3

Critère 5.3 : Pour chaque tableau de mise en forme, la compréhension de son contenu est-elle identique quand le tableau est linéarisé ?

Sommaire de la fiche :

Carte d'identité
Comprendre

Comment évaluer
Comment mettre en oeuvre

Illustrations
Références

revenir en haut de la page

Carte d'identité du critère 5.3 [niveau AccessiWeb : Bronze]

Test(s) AccessiWeb permettant de vérifier le critère 5.3

Note : le(s) test(s) suivant(s) sont issu(s) de AccessiWeb v1.1 [Déployé].

Test 5.3.a [Bronze] : Pour chaque tableau de mise en forme (balise table), la compréhension de son contenu est-elle identique quand le tableau est linéarisé ?

Correspondances avec des critères d'autres référentiels sur l'accessibilité du Web

Référentiel AccessiWeb 1.0 (19/12/2003) [version utilisée dans le Référentiel Accessibilité ADAE 2004] : 5.6 [Bronze]
WCAG 1.0 (05/05/1999) : 5.3 [P2]
UWEM 1.0 (05/07/2006) : 5.3_HTML_01 [P2]
WCAG 2.0 (11/12/2008) : 1.3.2 [A]
mobileOK 1.0 (02/11/2006) : pas de correspondance.
RGAA : pas de correspondance (aucune version datée du RGAA n'est disponible en ligne à la date de publication de ce guide).

revenir en haut de la page

Comprendre

Comprendre le critère

La compréhension de l'information présentée dans un tableau de mise en forme doit être identique après l'avoir linéarisé: l'ordre de lecture doit être le même.

Bénéfices pour les utilisateurs

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

Il n'y a pas d'élément d'information pour cette rubrique.

revenir en haut de la page

Comment évaluer

Note : de manière générale, il est conseillé de faire l'évaluation d'un critère via l'analyse de son code source. Ce procédé d'évaluation par le code source est détaillé ci-après quand il est possible : procédé d'évaluation en 3 étapes via le ou les tests associés au critère. Les procédés d'évaluation par différents outils sont donnés en complément de l'évaluation par le code source.

Par le code source

Sélectionner le(s) élément(s) à tester : Identifier dans un navigateur graphique les tableaux de mise en forme.
Appliquer le(s) test(s) suivant(s) :
- Test 5.3.a [Bronze] : Pour chaque tableau de mise en forme (balise table), la compréhension de son contenu est-elle identique quand le tableau est linéarisé ?
Valider le critère : le critère est validé si vous répondez oui au test applicable précédent.

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 d'outils Accessibilité du Web pour Internet Explorer (version 2.0 beta en français) :

Pour le test 5.3.a [Bronze] :

Sous Internet Explorer, ouvrir la page à analyser.
Dans le menu "Tableaux" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Linéariser".
Comparer la présentation des contenus avant et après linéarisation.
Vérifier que pour chaque tableau de mise en forme, la compréhension de son contenu est identique quand le tableau est linéarisé.
Si c'est le cas, le test est validé.

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

Pour le test 5.3.a [Bronze] :

Sous Firefox, ouvrir la page à analyser.
Dans le menu "Divers" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Linéariser la page".
Comparer la présentation des contenus avant et après linéarisation.
Vérifier que pour chaque tableau de mise en forme, la compréhension de son contenu est identique quand le tableau est linéarisé.
Si c'est le cas, le test est validé.

revenir en haut de la page

Comment mettre en oeuvre

Avertissement : les informations du paragraphe "Comment mettre en oeuvre" sont données à titre indicatif. Les contenus des sous-paragraphes Implémentation et Exemple de bonne pratique ne présentent pas tous les codes d'implémentation.

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

Avertissement : le contenu du paragraphe "Illustrations" est donné à titre indicatif. Il ne présente pas tous les cas possibles.

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

html techniques for WCAG 1.0 (section 5.2) : Tables for layout
WAI 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