# Guide AccessiWeb

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

## Fiche 5.4 : Dans un tableau de données, y a t-il un attribut HEADERS présent pour chacune des cellules du tableau ?

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

revenir en haut de la page

### Comprendre

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

- Bénéfice 1 :
  Correctement placés dans un tableau de données, les attributs `headers` et `id` permettent de relier le contenu d'une cellule au titre de la colonne ou de la ligne à laquelle il est associé. Une personne n'ayant qu'une vision linéaire de ce tableau pourra donc en permanence savoir à quel en-tête est attaché la cellule dans laquelle elle se trouve. Ceci s'applique également aux tableaux à plusieurs entrées.

#### 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 donnnent les relations significatives entre les informations des cellules correspondantes.
3. Pour chaque élément `TABLE` applicable, déterminer s'il y a des cellules de tableau avec deux niveaux logiques d'en-têtes ou plus ; si c'est le cas, identifier tous les en-têtes applicables pour toutes ces cellules.
4. Pour chaque cellule de données applicable, déterminer si tous les en-têtes applicables peuvent être identifiés de façon fiable à partir du code source (i.e., par l'utilisation des attributs `scope` et/ou `heders` et `id`).

#### 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.4.
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 les attributs `headers`, `id` ou `scope` sont utilisés.
5. Pour chaque tableau de données, vérifier que les balises `TH` et `TD` sont présentes et renseignées.
   Note : vérifier que chaque identifiant utilisé dans les en-têtes des tableaux de données est unique.
   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) :

1. Repérer les tableaux de données présents sur la page.
2. Activer l'option "Tableau de données complexes" du menu "Structure".
3. Ceci affiche les informations sur le tableau.
4. Vérifier que les attributs `headers`, `id` ou `scope` sont utilisés.
5. Vérifier que les balises `TH` et `TD` sont présentes et renseignées.
   Note : vérifier que chaque identifiant utilisé dans les en-têtes des tableaux de données est unique.

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

1. Repérer les tableaux de données présents sur la page.
2. Activer l'option "Voir Source" du menu "Voir Source".
3. Une nouvelle fenêtre apparaît et affiche le code source.
4. Vérifier que les attributs `headers`/`id` ou `scope` sont utilisés. Vérifier que les balises `TH` et `TD` sont présentes et renseignées.
   Note : vérifier que chaque identifiant utilisé dans les en-têtes des tableaux de données est unique.

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

L'attribut `id` sert à donner un identifiant unique à chaque en-tête de cellule. Cet attribut accompagne chaque balise `TH`. L'attribut `id` ne supporte pas les espaces et les accents.

<th id="col1">

L'attribut `headers` sert à créer un lien avec une ou plusieurs cellules d'en-tête. Il se place dans chaque balise `TD`. Il peut faire référence à plusieurs identifiants d'en-tête. Ceci est notamment utile pour des tableaux à plusieurs entrées.

<td headers="col1">

ou, pour un tableau avec des en-têtes de colonne et des en-têtes de ligne :

<td headers="col1 rang1">contenu de la cellule</td>

Bon à savoir : l'attribut `scope` peut être utilisé au sein des tables ne présentant qu'un ou deux niveaux d'associations linéaires. Dans ce cas, il suffit simplement de placer cet attribut dans la balise `TH` sans qu'il soit nécessaire de placer un attribut `headers` dans les balises `TD` correspondantes. Contrairement à l'attribut `id`, l'attribut `scope` n'est pas nécessairement un identifiant unique.

<th scope="col">en-tête</th>

#### Exemple de mauvaise pratique

A la lecture de l'extrait de code ci-dessous, on constate que les cellules de la seconde ligne du tableau ne sont pas reliées à leur en-tête de colonnes respectif, comme le sont les cellules des lignes suivantes. Ceci risque d'empêcher l'utilisateur de se situer dans le tableau dont il est alors obligé de mémoriser le nom de chaque colonne et leur ordre.

<table summary="température des 5 premiers jours de la semaine pour 3 villes">
<caption>températures de la semaine en fonction de la ville</caption>
<!-- ligne 1: entête des colonnes, ville + les 5 premiers jours -->
<thead>
<tr>
<th id="ville">ville</th>
<th id="lundi">lundi</th>
<th id="mardi">mardi</th>
<th id="mercredi">mercredi</th>
<th id="jeudi">jeudi</th>
<th id="vendredi">vendredi</th>
</tr>
</thead>
<tbody>
<!-- ligne 2: nom de la ville, données corespondantes -->
<tr>
<td>paris</td>
<td>10c°</td>
<td>8c°</td>
<td>10c°</td>
<td>12c°</td>
<td>10c°</td>
</tr>
<!-- ligne 3: nom de la ville, données corespondantes -->
<tr>
<td headers="ville" id="toulouse">toulouse</td>
<td headers="toulouse lundi">13c°</td>
<td headers="toulouse mardi">11c°</td>
<td headers="toulouse mercredi">12c°</td>
<td headers="toulouse jeudi">14c°</td>
<td headers="toulouse vendredi">12c°</td>
</tr>
<!-- ligne 4: nom de la ville, données corespondantes -->
<tr>
<td headers="ville" id="strasbourg">strasbourg</td>
<td headers="strasbourg lundi">7c°</td>
<td headers="strasbourg mardi">5c°</td>
<td headers="strasbourg mercredi">6c°</td>
<td headers="strasbourg jeudi">8c°</td>
<td headers="strasbourg vendredi">7c°</td>
</tr>
</tbody>
</table>

#### Exemple de bonne pratique

En corrigeant l'exemple précédent, nous associions chaque cellule de la première rangée à son en-tête. Il est à noter que l'attribut `headers` accepte plusieurs valeurs séparées d'un espace. Ceci signifie concrètement qu'une même cellule de tableau peut être associée à plusieurs en-tête, par exemple, un en-tête de colonne et un en-tête de ligne.

La première cellule, contenant le nom de la ville est rattachée à l'en-tête de colonne "ville". Elle peut aussi servir d'en-tête de ligne. C'est la raison pour laquelle, elle comporte un identifiant. Ainsi, les cellules contenant les valeurs de température sont reliées à la fois au nom de la ville et au jour auxquels elles correspondent.

Un utilisateur navigant dans un tel tableau à l'aide d'un navigateur vocal, par exemple entendra les changements de lignes et de colonnes. S'il passe de colonne en colonne, il entendra le nom du jour correspondant. S'il passe de ligne en ligne, il entendra le nom de la ville correspondante.

<table summary="température des 5 premiers jours de la semaine pour 3 villes">
<caption>températures de la semaine en fonction de la ville</caption>
<!-- ligne 1: entête des colonnes, ville + les 5 premiers jours -->
<thead>
<tr>
<th id="ville">ville</th>
<th id="lundi">lundi</th>
<th id="mardi">mardi</th>
<th id="mercredi">mercredi</th>
<th id="jeudi">jeudi</th>
<th id="vendredi">vendredi</th>
</tr>
</thead>
<tbody>
<!-- ligne 2: nom de la ville, données corespondantes -->
<tr>
<td headers="ville" id="paris">paris</td>
<td headers="paris lundi">10c°</td>
<td headers="paris mardi">8c°</td>
<td headers="paris mercredi">10c°</td>
<td headers="paris jeudi">12c°</td>
<td headers="paris vendredi">10c°</td>
</tr>
<!-- ligne 3: nom de la ville, données corespondantes -->
<tr>
<td headers="ville" id="toulouse">toulouse</td>
<td headers="toulouse lundi">13c°</td>
<td headers="toulouse mardi">11c°</td>
<td headers="toulouse mercredi">12c°</td>
<td headers="toulouse jeudi">14c°</td>
<td headers="toulouse vendredi">12c°</td>
</tr>
<!-- ligne 4: nom de la ville, donné©es corespondantes -->
<tr>
<td headers="ville" id="strasbourg">strasbourg</td>
<td headers="strasbourg lundi">7c°</td>
<td headers="strasbourg mardi">5c°</td>
<td headers="strasbourg mercredi">6c°</td>
<td headers="strasbourg jeudi">8c°</td>
<td headers="strasbourg vendredi">7c°</td>
</tr>
</tbody>
</table>

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.

Tableau dont les cellules ne sont pas reliées à leur titre (format mp3, 65 ko)

Voici, à partir de l'"Exemple de mauvaise pratique", ce que lit Home Page Reader lorsque l'utilisateur passe de colonne en colonne :
"Paris, dix degrés, huit degrés, dix degrés, douze degrés, dix degrés, bord droit".

Un tableau dont les cellules sont reliées à leur titre (format mp3, 65 ko)

Voici, à partir de l'"Exemple de bonne pratique", ce que dit Home Page Reader lorsque l'utilisateur passe de colonne en colonne. A chaque changement de colonne, un bip est émis) :
"(bip) Ville Paris, (bip) lundi dix degrés, (bip) mardi huit degrés, (bip) mercredi dix degrés, (bip) jeudi douze degrés, (bip) vendredi dix degrés."

revenir en haut de la page

### Références

#### Autres fiches à consulter

- Fiche 5.3 : Dans les tableaux de données, y a t-il des en-têtes de colonnes appropriés ?
- 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