Les points de contrôle classés par thèmes

LISTE DES THÈMES.

TABLEAUX.

5.1 (P1)
Source	Formulation
WCAG 1.0 version anglaise	For data tables, identify row and column headers.
WCAG 1.0 version française officielle	Pour les tableaux de données, identifier les en-têtes de lignes et de colonnes.
WCAG 1.0 version française d'AccessibilitéWeb	Pour les tableaux de données, identifier les en-têtes de lignes et de colonnes.
Section 508 version anglaise	94.22 (g) Row and column headers shall be identified for data tables.
WCAG 2.0 version anglaise	1.3.1 Information and relationships conveyed through presentation can be programmatically determined, and notification of changes to these is available to user agents, including assistive technologies. (level 1)
AccessiWeb	Fiche 5.3 : Dans les tableaux de données, y a t-il des en-têtes de colonnes appropriés ?

Les tableaux de données constituent un environnement complexe pour les utilisateurs aveugles ou malvoyants parce qu'ils ne peuvent en avoir une vision globale qui leur permettrait d'en comprendre facilement l'organisation. Les règles d'accessibilité prévoient donc différentes façons d'ajouter de l'information de navigation qui les rendent plus accessibles.

Pour un tableau simple, il s'agit seulement de distinguer les cellules d'en-tête <th> des cellules de données <td>. Les logiciels de lecture d'écran pourront ainsi indiquer à l'utilisateur le titre de la colonne ou de la ligne où il se trouve.

Voir aussi A-Prompt : 5.1 et Technique 5.1 [anglais].

5.2 (P1)
Source	Formulation
WCAG 1.0 version anglaise	For data tables that have two or more logical levels of row or column headers, use markup to associate data cells and header cells.
WCAG 1.0 version française officielle	Pour les tableaux de données qui ont deux niveaux logiques d'en-tête de colonne ou de ligne ou plus , utiliser des balises pour associer les cellules de données et les cellules d'en-tête.
WCAG 1.0 version française d'AccessibilitéWeb	Pour les tableaux de données qui ont deux niveaux ou plus d'en-têtes de ligne ou de colonne, utiliser le balisage pour associer les cellules de données et les cellules d'en-tête.
Section 508 version anglaise	1194.22 (h) Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.
WCAG 2.0 version anglaise	1.3.1 Information and relationships conveyed through presentation can be programmatically determined, and notification of changes to these is available to user agents, including assistive technologies. (level 1)
AccessiWeb	Fiche 5.4 : Dans un tableau de données, y a t-il un attribut HEADERS présent pour chacune des cellules du tableau ?

Pour les tableaux de données complexes qui ont plus d'une ligne de titres ou plus d'une colonne de titres, vous devez associer explicitement les cellules de données avec toutes les cellules de titres correspondantes.

Il faut donc d'abord assigner un attribut id unique (pour l'ensemble de la page) à chaque cellule de titre. Par la suite, il faut incorporer un attribut headers="…" à chaque cellule de données. Ce dernier placera entre guillemets et séparés par un espace tous les id des cellules de titre qui s'appliquent à la cellule courante.

Ce travail doit habituellement être réalisé à la main directement dans le code, car les logiciels auteurs n'ont pas prévu d'interface pour ce faire.

Exemple de codage d'un tableau complexe :

Pour obtenir ceci :

Rapport des frais de voyage
Destination	Dates du déplacement	Repas	Hôtel	Transport	Total
Attlanta	25 août	37	112	45
	26 août	27	112	45
	Sous-total	64	224	90	378
Boston	27 août	96	109	36
	28 août	35	109	36
	Sous-total	131	218	72	421
Compilation	Grand total	195	442	162	799

Codez cela :

<table border="1" cellspacing="2" cellpadding="2" summary="Ce tableau 
  présente les frais de voyage. Par lignes vous trouverez les destinations 
  et les dates ainsi qu'un grand total. Par colonnes vous rencontrerez 
  les catégories de dépenses ainsi qu'un total. Notez que la première 
  colonne comporte des cellules fusionnées.">
<caption>Rapport des frais de voyage</caption>
<tr> 
  <th id="l1c1">Destination</th>
  <th id="l1c2">Dates du déplacement</th>
  <th id="l1c3">Repas</th>
  <th id="l1c4">Hôtel</th>
  <th id="l1c5">Transport</th>
  <th id="l1c6">Total</th>
</tr>
<tr> 
  <th id="l2c1" headers="l1c1" rowspan="3">Attlanta</th>
  <th id="l2c2" headers="l1c2 l2c1">25 août</th>
  <td headers="l1c3 l2c1 l2c2">37</td>
  <td headers="l1c4 l2c1 l2c2">112</td>
  <td headers="l1c5 l2c1 l2c2">45</td>
  <td headers="l1c6 l2c1 l2c2">&nbsp;</td>
</tr>
<tr> 
  <th id="l3c2" headers="l1c2 l2c1">26 août</th>
  <td headers="l1c3 l2c1 l3c2">27</td>
  <td headers="l1c4 l2c1 l3c2">112</td>
  <td headers="l1c5 l2c1 l3c2">45</td>
  <td headers="l1c6 l2c1 l3c2">&nbsp;</td>
</tr>
<tr> 
  <th id="l4c2" headers="l1c2 l2c1">Sous-total</th>
  <td headers="l1c3 l2c1 l4c2">64</td>
  <td headers="l1c4 l2c1 l4c2">224</td>
  <td headers="l1c5 l2c1 l4c2">90</td>
  <td headers="l1c6 l2c1 l4c2">378</td>
</tr>
<tr> 
  <th id="l5c1" headers="l1c1" rowspan="3">Boston</th>
  <th id="l5c2" headers="l1c2 l5c1">27 août</th>
  <td headers="l1c3 l5c1 l5c2">96</td>
  <td headers="l1c4 l5c1 l5c2">109</td>
  <td headers="l1c5 l5c1 l5c2">36</td>
  <td headers="l1c6 l5c1 l5c2">&nbsp;</td>
</tr>
<tr> 
  <th id="l6c2" headers="l1c2 l5c1">28 août </th>
  <td headers="l1c3 l5c1 l6c2">35</td>
  <td headers="l1c4 l5c1 l6c2">109</td>
  <td headers="l1c5 l5c1 l6c2">36</td>
  <td headers="l1c6 l5c1 l6c2">&nbsp;</td>
</tr>
<tr> 
  <th id="l7c2" headers="l1c2 l5c1">Sous-total</th>
  <td headers="l1c3 l5c1 l7c2">131</td>
  <td headers="l1c4 l5c1 l7c2">218</td>
  <td headers="l1c5 l5c1 l7c2">72</td>
  <td headers="l1c6 l5c1 l7c2">421</td>
</tr>
<tr> 
  <th id="l8c1">Compilation</th>
  <th id="l8c2">Grand total</th>
  <td headers="l1c3 l8c1 l8c2">195</td>
  <td headers="l1c4 l8c1 l8c2">442</td>
  <td headers="l1c5 l8c1 l8c2">162</td>
  <td headers="l1c6 l8c1 l8c2">799</td>
</tr>
</table>

Voir aussi A-Prompt : 5.2 et Technique 5.2 [anglais].

Vous pouvez également consulter un article très intéressant en anglais : Accessible Data Tables [anglais]. Cet article propose également une page de test pour des tableaux complexes : Data Table Accessibility Test Page [anglais].

5.3 (P2) et 5.4 (P2)
Source	Formulation
WCAG 1.0 version anglaise	5.3 : Do not use tables for layout unless the table makes sense when linearized. Otherwise, if the table does not make sense, provide an alternative equivalent (which may be a linearized version). 5.4 : If a table is used for layout, do not use any structural markup for the purpose of visual formatting.
WCAG 1.0 version française officielle	5.3 : Ne pas utiliser les tables pour la mise en page, à moins qu'elles n'aient un sens lorsqu'elles sont déchiffrées en mode linéaire. Autrement, si la table n'a pas de signification, prévoir une version alternative (qui pourra être une version linéaire). 5.4 : 5.4 Dans le cas ou une table est employée pour la mise en page, il ne faut pas utiliser de balises structurelles dans un but de formatage visuel.
WCAG 1.0 version française d'AccessibilitéWeb	5.3 : Ne pas utiliser les tableaux pour la mise en page, à moins qu'ils n'aient un sens lorsqu'ils sont linéarisés. Si le tableau n'a pas de sens, fournir une alternative équivalente (qui peut être une version linéarisée). 5.4 : Si un tableau est utilisé pour la mise en page, ne pas utiliser de balisage structurel dans un but de formatage visuel.
Section 508 version anglaise	5.3 : [Aucun équivalent.] 5.4 : [Aucun équivalent.]
WCAG 2.0 version anglaise	5.3 : 1.3.3 When the sequence of the content affects its meaning, that sequence can be programmatically determined. (level 1) 5.4 : 1.3.1 Information and relationships conveyed through presentation can be programmatically determined, and notification of changes to these is available to user agents, including assistive technologies. (level 1) Especially: Failure of SC 1.3.1 due to using structural markup in a way that does not represent relationships in the content.
AccessiWeb	5.3 : Fiche 5.6 : Dans un tableau de mise en forme, le contenu est-il correctement ordonné ? 5.4 : Fiche 5.3 : Dans les tableaux de données, y a t-il des en-têtes de colonnes appropriés ? Fiche 13.8 : La présentation de la page est-elle réalisée sans détourner certaines balises de leur fonction d'origine ?

Les tableaux utilisés à des fins de mise en page doivent pouvoir se linéariser de façon logique, c'est-à-dire qu'on doit pouvoir les lire de façon séquentielle, de gauche à droite, rangée par rangée.

Par ailleurs, un tableau de mise en page, ne doit pas utiliser de cellules d'en-tête <th> pour obtenir un effet de présentation qui doit être contrôlé par la feuille de styles CSS.

Il est encore mieux de se passer de ce type de tableau et de disposer les zones de contenu dans des balises <div> positionnées par CSS, en portant attention à l'ordre d'apparition des éléments dans le code source qui correspondra à l'ordre de lecture avec un lecteur d'écran.

Il faut aussi s'assurer que les blocs de texte ne se chevaucheront pas lorsque l'on grossit le texte avec la Taille la plus grande de IE 6 ou avec un facteur de zoom de 150 %.

Voir aussi l'Aide de A-Prompt : 5.3 et A-Prompt : 5.4, Technique 5.3 [anglais] et Technique 5.4 [anglais].

5.5 (P3*)
Source	Formulation
WCAG 1.0 version anglaise	Provide summaries for tables.
WCAG 1.0 version française officielle	Créer des sommaires pour les tableaux.
WCAG 1.0 version française d'AccessibilitéWeb	Fournir des sommaires pour les tableaux.
Section 508 version anglaise	[No equivalent.]
WCAG 2.0 version anglaise	This is no longer required for conformance.
AccessiWeb	Fiche 5.1 : L'attribut SUMMARY est-il présent et pertinent ? Fiche 5.2 : Dans un tableau de données, la balise CAPTION est-elle utilisée pour donner un titre au tableau ?

Les tableaux de données ont besoin d'un sommaire et peuvent également bénéficier d'une légende. Le sommaire veut compenser le manque de vision globale de l'utilisateur non-voyant en donnant une brève description de l'organisation du tableau. Il est inscrit dans l'attribut summary et peut être aussi long que nécessaire.

Un bon sommaire doit décrire les grandes catégories d'information présentées par colonne et par ligne et signaler les irrégularités éventuelles correspondant aux cellules fusionnées horizontalement ou verticalement. L'effet recherché ici est une vue d'ensemble, c'est pourquoi il n'est pas utile de reprendre dans le sommaire tous les titres de colonne et de ligne, mais plutôt d'en décrire les grandes catégories.

La légende, quant à elle, est une information complémentaire qui vient chapeauter un tableau à la façon d'un titre. Elle s'inscrit dans l'élément <caption> qui doit être placé immédiatement sous l'élément <table>.

Note : Vous ne devez pas inscrire un sommaire vide (summary=") pour les tableaux de présentation, parce que c'est un des critères utilisés par les lecteurs d'écran pour distinguer entre tableau de présentation et tableau de données.

Voir l'exemple déjà donné au point 5.2.

Voir aussi A-Prompt : 5.5 et Technique 5.5 [anglais].

5.6 (P3*)
Source	Formulation
WCAG 1.0 version anglaise	Provide abbreviations for header labels.
WCAG 1.0 version française officielle	Prévoir des abbréviations pour les étiquettes d'en-têtes.
WCAG 1.0 version française d'AccessibilitéWeb	Fournir des abréviations pour les étiquettes d'en-têtes.
Section 508 version anglaise	[No equivalent.]
WCAG 2.0 version anglaise	This is no longer required for conformance, but a potentially useful technique.
AccessiWeb	Fiche 5.5 : Dans un tableau de données, lorsqu'un titre de colonne dépasse 15 caractères, l'attribut ABBR est-il utilisé ?

Quand les titres des colonnes ou des lignes sont longs et qu'il serait fastidieux pour l'utilisateur d'entendre répéter cette information à de nombreuses reprises, il est préférable d'utiliser des abréviations. Considérez un tableau avec l'en-tête qui suit : « Estimation des dépenses pour les soins de santé par les agences du Gouvernement durant la prochaine décennie » qui pourrait être abrégé par : « Estimation des dépenses ».

Exemple :

<th abbr="Estimation des dépenses">
  Estimation des dépenses pour les soins de santé par les 
  agences du Gouvernement durant la prochaine décennie
</th>

Notez bien que ce type de situation devrait être plutôt rare car, même visuellement, on aurait avantage à utiliser un titre beaucoup plus court.

Voir aussi A-Prompt : 5.6 et Technique 5.6 [anglais].

10.3 (P3)
Source	Formulation
WCAG 1.0 version anglaise	Until user agents (including assistive technologies) render side-by-side text correctly, provide a linear text alternative (on the current page or some other) for all tables that lay out text in parallel, word-wrapped columns.
WCAG 1.0 version française officielle	Jusqu'à ce que les agents utilisateurs (comprenant les technologies d'assistance) puissent restituer des textes adjacents correctement, prévoir une alternative en mode texte linéaire (sur la page concernée ou sur une autre) pour toutes les tables qui formattent le texte en colonnes parallèles et qui ajustent le texte sur la largeur de la colonne.
WCAG 1.0 version française d'AccessibilitéWeb	Jusqu'à ce que les agents utilisateurs (y compris les technologies d'adaptation) rendent le texte en vis-à-vis correctement, fournir une alternative linéaire du texte (sur la page concernée ou sur une autre) pour tous les tableaux qui disposent le texte en colonnes parallèles avec retour à la ligne automatique.
Section 508 version anglaise	[No equivalent.]
WCAG 2.0 version anglaise	WCAG 1.0 Checkpoint 10.3 is no longer required for conformance to WCAG 2.0.
AccessiWeb	[Aucun équivalent.]

Il s'agit encore ici de la condition « Jusqu'à ce que les agents utilisateurs… ». Nous considérons que cette condition est remplie depuis longtemps en ce qui concerne les logiciels de lecture d'écran. Nous ne voyons donc aucune utilité à fournir une version linéarisée des tableaux de mise en page.

Pour leur part, les rédacteurs de WCAG 2.0 (encore en version de travail au moment d'écrire ces lignes) écrivent : « WCAG 1.0 Checkpoint 10.3 is no longer required for conformance to WCAG 2.0. ».

De toute façon, il serait préférable de se passer de ce type de tableau et de disposer les zones de contenu dans des balises <div> positionnées par CSS, en portant attention à l'ordre d'apparition des éléments dans le code source qui correspondra l'ordre de lecture des lecteurs d'écran.

Voir aussi Technique 10.3 [anglais].

Dernière mise à jour : 2006-10-29

Revenir au début de la page.

Contactez-nous !
Plan du site
Politique d'accessibilité