Tableaux

Liste des points de contrôle

• En-têtes de lignes et de colonnes
• Association des cellules de données et des cellules d'en-tête
• Tableaux pour la mise en page
• Sommaires
• Abréviations pour les en-têtes
• Alternative linéaire des tabelaux
  

Identifier les en-têtes de lignes et de colonnes des tableaux de données. 5.1 (P1)

WCAG 1.0, traduction 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 de travail, traduction française d'AccessibilitéWeb

• 1.3.1 (niveau A)
  Information et relations :
  L’information, la structure et les relations données par la présentation peuvent être déterminés par programmation ou sont données dans le texte.

Erreurs à éviter :

• F46 : Utiliser une balise <th> ou <caption> ou un attribut summary non vide dans un tableau de mise en page.
• F48 : Utiliser la balise <pre> pour présenter un tableau.
• F33 et F34 : Utiliser des espaces pour formater un texte en colonnes ou en tableau.

Projet de standard du gouvernement du Québec

• 01 - 7, c : Un tableau de données doit avoir des cellules d’en-têtes de ligne ou de colonne qui sont indiqués à l’aide de la balise <th>.
• 02 - 10, a : un tableau de données doit avoir des cellules d’en-têtes de ligne ou de colonne qui sont identifiables mécaniquement par une technologie d’adaptation informatique.

RGAA

5.1 Baliser les en-têtes de lignes et de colonnes

• Test 5.1.1 : Présence des en-têtes de lignes et de colonnes dans les tableaux de données.

AccessiWeb

Fiche 5.3 : Dans les tableaux de données, y a t-il des en-têtes de colonnes appropriés ?

Clientèles visées

• Personnes ayant une incapacité visuelle.
• Personnes ayant une incapacité cognitive.

Explication

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 Info and Relationships in WCAG 2.0.

Utiliser le balisage pour associer les cellules de données et les cellules d'en-tête des tableaux complexes. 5.2 (P1)

WCAG 1.0, traduction 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 de travail, traduction française d'AccessibilitéWeb

• 1.3.1 (niveau A)
  Information et relations :
  L’information, la structure et les relations véhiculées par la présentation peuvent être déterminés par programmation ou sont disponibles dans le texte.

Projet de standard du gouvernement du Québec

• 01 - 7, d : Dans un tableau complexe de données,
  • une cellule d’en-tête doit avoir un identifiant unique qui est indiqué à l’aide de l’attribut id et
  • une cellule de données doit être explicitement associée, à l’aide des attributs headers, aux cellules d’en-tête correspondantes.
• 02 - 10, b : Dans un tableau de données comptant plus d'une ligne ou plus d'une colonne d'en-tête, une cellule de données doit pouvoir être explicitement associée aux cellules d’en-tête qui s’y appliquent de sorte que cette association puisse être identifiée mécaniquement.

RGAA

5.2 Associer les cellules de données aux en-têtes de lignes et de colonnes

• Test 5.2.1 : Relation des en-têtes de lignes et de colonnes avec les cellules qui s'y rattachent dans un tableau de données simple.
• Test 5.2.2 : Relation des en-têtes de lignes et de colonnes avec les cellules qui s'y rattachent dans un tableau de données complexe.
• Test 5.2.3 : Utilisation adaptée des éléments propres aux tableaux de données.

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 ?

Clientèles visées

• Personnes ayant une incapacité visuelle.
• Personnes ayant une incapacité cognitive.

Clientèles visées

• Personnes ayant une incapacité visuelle.
• Personnes ayant une incapacité cognitive.

Explication

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 d'en-têtes correspondantes.

Il faut donc d'abord assigner un attribut id unique (pour l'ensemble de la page) à chaque cellule d'en-tête. 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 :

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">Gaspé</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">Gatineau</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 Info and Relationships in WCAG 2.0.

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

Ne pas utiliser les tableaux pour la mise en page, à moins qu'ils n'aient un sens lorsqu'ils sont linéarisés. 5.3 (P2) et 5.4 (P2)

WCAG 1.0, traduction 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

[No equivalent.]

WCAG 2.0 version de travail, traduction française d'AccessibilitéWeb

• 1.3.1 (niveau A)
  Information et relations :
  L’information, la structure et les relations données par la présentation peuvent être déterminés par programmation ou sont données dans le texte.
• 1.3.2 (niveau A)
  Ordre séquentiel logique :
  Lorsque l’ordre de présentation du contenu affecte sa signification, une séquence de lecture correcte peut être déterminée par programmation

Erreurs à éviter :

• F46 : Utiliser une balise <th> ou <caption> ou un attribut summary non vide dans un tableau de mise en page.
• F48 : Utiliser la balise <pre> pour présenter un tableau.
• F33 et F34 : Utiliser des espaces pour formater un texte en colonnes ou en tableau.
• F49 : Utiliser un tableau de présentation HTML qui ne se linéarise pas dans un ordre logique.

Projet de standard du gouvernement du Québec

• 01 - 7, e : Un tableau de présentation doit exclure l’usage de l’attribut et des balises réservés à un tableau de données.
• 01 - 7, f et 02 - 10, c : Une fois restructurée de façon linéaire, l’information incluse dans un tableau de présentation doit respecter l’ordre séquentiel logique du contenu.

RGAA

5.3 N'utiliser des tableaux pour la mise en page que si leur linéarisation est correcte

• Test 5.3.1 : Linéarisation des tableaux de mise en page.
• Test 5.3.2 : Privilégier l'utilisation de styles CSS au lieu des tableaux de mise en forme

5.4 Ne pas utiliser d'éléments de tableaux de données pour des tableaux de mise en page

• Test 5.4.1 : Non-détournement des éléments propres aux tableaux de données.

AccessiWeb

• Fiche 5.6 : Dans un tableau de mise en forme, le contenu est-il correctement ordonné ?
• 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 ?

Clientèles visées

• Personnes ayant une incapacité visuelle.
• Personnes ayant une incapacité cognitive.

Explication

Les tableaux utilisés à des fins de mise en page ne doivent pas utiliser les balises ou les attributs réservés aux tableaux de données afin d'éviter que les logiciels de lecture d'écran ne réagissent comme s'il s'agissait de tableaux de données et ne donnent, en conséquence, toutes sortes d'informations superflues comme les numéros de lignes et de colonnes.

De plus, les tableaux de présentation 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.

Contre exemple :

Présentation linéaire :

Liste des universités

Université Bishop's

Université Concordia

Sherbrooke : (819) 822-9600

Montréal : (514) 848-2424

Université Laval

Université McGill

Québec : (418) 656-3333

Montréal : (514) 398-4455

Université de Montréal

École des HÉC de Montréal

Montréal : (514) 343-6111

Montréal : (514) 340-6000

École Polytechnique de Montréal

Université de Sherbrooke

Montréal : (514) 340-4711

Sherbrooke : (819) 821-7000

Solution :

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 style CSS.

Il est encore mieux de se passer de ce type de tableaux 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 200 %. (Voir la section sur la Mise en forme.)

Voir aussi Info and Relationships in WCAG 2.0 et Meaningful Sequence in WCAG 2.0.

Fournir des sommaires pour les tableaux de données. 5.5 (P3*)

WCAG 1.0, traduction française d'AccessibilitéWeb

Fournir des sommaires pour les tableaux.

Section 508 version anglaise

[No equivalent.]

WCAG 2.0 version de travail, traduction française d'AccessibilitéWeb

• 1.3.1 (niveau A)
  Information et relations :
  L’information, la structure et les relations données par la présentation peuvent être déterminés par programmation ou sont données dans le texte.

Projet de standard du gouvernement du Québec

• 01 - 7, a : Dans un site Web public, un tableau complexe de données doit comporter un résumé indiqué à l’aide de l’attribut summary.
• 01 - 7, b : Le résumé d’un tableau complexe de données doit décrire brièvement les grandes catégories d’information présentées par colonnes et par lignes, tout en notant les irrégularités, lorsque présentes, dans le nombre de lignes ou de colonnes.

RGAA

5.5 Donner des informations complémentaires sur les tableaux de données

• Test 5.5.1 : Titre pour les tableaux de données.
• Test 5.5.2 : Résumé pour les tableaux de données.
• Test 5.5.3 : Différence entre le résumé et le titre d'un tableau de données.
  

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 ?

Clientèles visées

• Personnes ayant une incapacité visuelle.
• Personnes ayant une incapacité cognitive.

Explication

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 les tableaux de présentation et les tableaux de données.

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

Voir aussi Technique 5.5 in WCAG 1.0.

Fournir des abréviations pour les en-têtes. 5.6 (P3)

WCAG 1.0, traduction 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 de travail, traduction française d'AccessibilitéWeb

Exigence retirée.

Projet de standard du gouvernement du Québec

[Aucun équivalent.]

RGAA

5.6 Proposer des valeurs de remplacement pour les en-têtes de tableaux de données

• Test 5.6.1 : Présence d'abréviations sur les cellules d'en-tête des tableaux de données.
• Test 5.6.2 : Longueur des abréviations sur les cellules d'en-tête des tableaux de données.
• Test 5.6.3 : Pertinence des abréviations sur les cellules d'en-tête des tableaux de données.

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

Clientèles visées

• Personnes ayant une incapacité visuelle.
• Personnes ayant une incapacité cognitive.

Explication

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 ».

De même, si un tableau comporte déjà des abréviations dans les cellules d'en-tête, on peut utiliser cette même technique pour en donner une interprétation plus compréhensible. Par exemple, un calendrier dont les jours de la semaine sont identifiés par deux lettres seulement (lu, ma, me, etc.). Ce type d'abréviation sera peu compréhensible en synthèse vocale.

Exemple :

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

Notez bien que la situation décrite dans cet exemple devrait être plutôt rare car, même visuellement, on aurait avantage à utiliser un titre beaucoup plus court.

Voir aussi Technique 5.6 in WCAG 1.0.

Fournir une alternative linéaire du texte pour les tableaux de mise en page. 10.3 (P3)

WCAG 1.0, traduction 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 de travail, traduction française d'AccessibilitéWeb

Exigence retirée.

Projet de standard du gouvernement du Québec

[Ce point de contrôle est jugé désuet.]

RGAA

10.3 Fournir une version alternative des contenus en colonnes parallèles.

AccessiWeb

[Aucun équivalent.]

Explication

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 tableaux 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 in WCAG 1.0.

Liste des thèmes.

• Préambule
• Structure
• Contenu non textuel
• Contenu multimédia
• Formulaires
• Tableaux
• Mise en forme
• Validité
• Interactivité
• Navigation
• Compréhension

Revenir au début de la page.