# Guide AccessiWeb

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

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

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.3
- Niveau AccessiWeb : bronze
- Point(s) de contrôle WCAG 1.0 correspondants (Priorité 1 de WAI) : 5.1
- Point(s) de contrôle WCAG 1.0 correspondants (Priorité 2 de WAI) : 5.4

revenir en haut de la page

### Comprendre

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

- Bénéfice 1 :
  Dans un tableau de données, la balise `TH` spécifie les en-têtes de colonnes ou de lignes. Elle permet aux utilisateurs de navigateurs vocaux et lecteurs d'écran de connaître le titre de la ligne ou de la colonne dans laquelle ils se trouvent. Les personnes aveugles ont une lecture linéaire des tableaux. Aussi, le marquage des en-têtes de colonnes constitue-t-il un point de repère essentiel.

#### 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

#### Par le code source

1. Identifier tous les éléments `TABLE` en faisant une recherche dans le code source.
2. Dans chaque cas, déterminer s'il s'agit d'un tableau de données en jugeant si les lignes et les colonnes du tableau indiquent les relations importantes entre les informations des cellules correspondantes.
3. Pour chaque tableau de données, déterminer s'il y a des colonnes avec exactement un niveau logique d'en-têtes de colonnes (idem pour des lignes avec exactement un niveau logique d'en-têtes de lignes).
4. En inspectant le code source, vérifier si chaque en-tête de colonne applicable est contenu dans un élément `TH` (idem pour chaque en-tête de ligne applicable).

#### 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.3.
3. Les informations sur le(s) tableau(x) de données de la page s'affichent dans la page.
4. Pour chaque tableau de données, vérifier que toutes les cellules de la première rangée (ligne et/ou colonne) sont codées par la balise `TH`.
   Note : Pour enlever les informations sur les tableaux de la page, 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) :

Méthode 1 :

1. Repérer les tableaux de données présents sur la page.
2. A l'aide de la souris, sélectionner le ou les tableaux de données présent(s).
3. Cliquer sur le menu "Source", puis sur l'option "Voir le code source de la sélection [Nouvelle fenêtre]".
4. Vérifier la présence des balises `TH` et `/TH` sur la première rangée.

Méthode 2 :

1. Repérer les tableaux de données présents sur la page.
2. Activer l'option "Tableau de données complexe" du menu "Structure".
3. Ceci affiche les informations sur le tableau.
4. Vérifier que toutes les cellules de la première rangée sont codées par la balise `TH`.

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

1. Activer l'option "Afficher le nom de l'élément entouré" du menu "Entourer".
2. Puis, activer l'option "Entourer un élément personnalisé ..." du menu "Entourer".
3. Une fenêtre apparaît. Saisir dans le premier champ "Elément 1" les lettres th. Observer la couleur associée à cet élément dans la case de couleur suivant la zone de saisie (par défaut : rouge). Appuyer sur le bouton OK.
4. Localiser dans la page les tableaux de données et identifier si du texte est entouré d'un liseret rouge (la balise `TH` est inscrite dans le liseret rouge).
   Note : Pour les tableaux de données, la balise `TH` doit être utilisée pour spécifier les en-têtes de colonnes et/ou de lignes.
   Note : Appuyer sur la touche F5 pour enlever le(s) liseret(s) rouge(s) de la page.

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

Ce critère n'est pas évaluable par le lecteur d'écran Jaws.

revenir en haut de la page

### Comment mettre en oeuvre

#### Qui est concerné ?

C'est le développeur HTML qui implémente et évalue ce critère.

#### Implémentation

Les balises `TH` doivent apparaître entre les balises `TR` et `/TR` de la première rangée du tableau.
Des balises d'en-tête du tableau `THEAD` et `/THEAD` peuvent être utilisées. Celles-ci englobent les balises de la première rangée.
Ces dernières permettent aussi lors d'une impression de reproduire les en-têtes sur chaque page si le tableau est très long.
Syntaxe générale :

<table summary="[résumé du tableau]">
<caption>[titre du tableau]</caption>
<thead>
<tr>
<th>en-tête 1</th>
<th>en-tête 2</th>
...
</tr>
</thead>
[contenu du tableau]
</table>

#### Exemple de mauvaise pratique

L'extrait de code ci-dessous est celui d'un tableau de données. Or, la première rangée représente les en-têtes de colonnes de ce tableau. Ces en-têtes doivent être codées par les balises `TH` et `/TH`, et non par les balises `TD` et `/TD`.

<table summary="Le tableau représente deux colonnes, l'une avec les ingrédients, l'autre avec la quantité">
<caption>Ingrédients et quantité</caption>
<!-- première rangée du tableau -->
<thead>
<tr>
<td id="ingredient">Ingrédient</td>
<td id="quantite">Quantité</td>
</tr>
</thead>
<tbody>
<tr>
<td headers="ingredient">Sucre</td>
<td headers="quantite">200g</td>
</tr>
<tr>
<td headers="ingredient">Beurre</td>
<td headers="quantite">250g</td>
</tr>
</tbody>
</table>

#### Exemple de bonne pratique

En reprenant l'exemple précédent, il suffit de modifier la première rangée de cellules en remplaçant les balises `TD` par les balises <`TH`.

<table summary="Le tableau représente deux colonnes, l'une avec les ingrédients, l'autre avec la quantité">
<caption>Ingrédients et quantité</caption>
<!-- première rangée du tableau -->
<thead>
<tr>
<th id="ingredient">Ingrédient</th>
<th id="quantite">Quantité</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="ingredient">Sucre</td>
<td headers="quantite">200g</td>
</tr>
<tr>
<td headers="ingredient">Beurre</td>
<td headers="quantite">250g</td>
</tr>
</tbody>
</table>

revenir en haut de la page

### Illustrations

Cette capture d'écran présente un tableau de données pour une recette de cuisine. La première colonne est celle des ingrédients, la seconde, les quantités. La première rangée du tableau comporte des en-têtes marqués par la balise `TH`. Ceci permet d'une part de les mettre visuellement en valeur, d'autre part, de mettre en place un balisage correct pour qu'ils soient reconnus par les lecteurs d'écran ou les navigateurs vocaux. Il faut noter que l'utilisation de la balise `TH` seule ne suffit pas. Pour être complet, il faut également respecter le critère 5.4.

revenir en haut de la page

### Références

#### Autres fiches à consulter

- 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 ?
- Fiche 5.4 : Dans un tableau de données, y a t-il un attribut HEADERS présent pour chacune des cellules du tableau ?
- 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é ?

#### Autres ressources

- html Techniques (section 5.1.2) Providing summary information
- html specifications : Tables in html documents
- Web Content Accessibility Curriculum (section 5.1) : For data tables, identify row and column headers
- Web Content Accessibility Curriculum (section 5.2) : For data tables use markup to associate data cells and header cells
- accès pour tous : Les tableaux
- opquast : Les résumés de tableaux

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