retour vers le site AccessiWeb

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 ?

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

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

Un tableau de données comportant des en-têtes de colonnes

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

Autres ressources

revenir en haut de la page


Fiche précédente : fiche 5.2 Fiche suivante : fiche 5.4

Guide AccessiWeb (version 2.1, 30 août 2006) | Conditions d'utilisation | Contact