retour vers le site AccessiWeb

Guide AccessiWeb

vous êtes ici : Accueil > Fiches AccessiWeb : Tableaux > Critère 5.6

Critère 5.6 : Pour chaque tableau de données, chaque en-tête de colonnes et chaque en-tête de lignes a-t-il une balise th ?

revenir en haut de la page

Carte d'identité du critère 5.6 [niveau AccessiWeb : Bronze]

Test(s) AccessiWeb permettant de vérifier le critère 5.6

Note : le(s) test(s) suivant(s) sont issu(s) de AccessiWeb v1.1 [Déployé].

Autre(s) fiche(s) AccessiWeb à consulter en relation avec cette fiche

Correspondances avec des critères d'autres référentiels sur l'accessibilité du Web

revenir en haut de la page

Comprendre

Comprendre le critère

Tous les tableaux de données doivent avoir des en-têtes de colonnes et des en-têtes de lignes avec une balise th.

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

Note : de manière générale, il est conseillé de faire l'évaluation d'un critère via l'analyse de son code source. Ce procédé d'évaluation par le code source est détaillé ci-après quand il est possible : procédé d'évaluation en 3 étapes via le ou les tests associés au critère. Les procédés d'évaluation par différents outils sont donnés en complément de l'évaluation par le code source.

Par le code source

  1. Sélectionner le(s) élément(s) à tester :
    • Identifier dans un navigateur graphique les tableaux de données, puis identifier les cellules qui sont des en-têtes de colonnes et/ou des en-tête de lignes.
    • Ouvrir le code source de la page Web et sélectionner le code associé à tous les éléments suivants : balise table (exemple de code source pour un tableau de données : <table summary="résumé du tableau"><caption>Titre du tableau</caption).


  2. Appliquer le(s) test(s) suivant(s) :
  3. Valider le critère : le critère est validé si vous répondez oui à tous les tests applicables précédents.


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 d'outils Accessibilité du Web pour Internet Explorer (version 2.0 beta en français) :
Pour le test 5.6.a [Bronze] et le test 5.6.b [Bronze] :
  1. Sous Internet Explorer, ouvrir la page à analyser.
  2. Repérer les tableaux de données présents sur la page.
  3. Dans chaque tableau de données, repérer les en-têtes de colonnes et/ou les en-têtes de lignes.
  4. Dans le menu "Tableaux" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Mettre en valeur les tableaux de données"
  5. Des informations sur la structure de chaque tableau de données s'affichent
  6. Vérifier que pour chaque tableau de données, chaque en-tête de colonnes et/ou chaque en-tête de lignes a une balise th.
  7. Si c'est le cas, le test est validé.

Evaluer avec la Barre d'Outils Web Developper pour Firefox (version 1.1.4 en français) :
Pour le test 5.6.a [Bronze] et le test 5.6.b [Bronze] :
  1. Sous Firefox, ouvrir la page à analyser.
  2. Repérer dans la page les tableaux de données.
  3. Dans le menu "Voir Source" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Voir Source".
  4. Une nouvelle fenêtre apparaît contenant le code source de la page.
  5. En faisant une recherche sur le mot table (ctrl + f), vérifier que pour chaque tableau de données, chaque en-tête de colonnes et/ou chaque en-tête de lignes a une balise th.
  6. Si c'est le cas, le test est validé.

revenir en haut de la page

Comment mettre en oeuvre

Avertissement : les informations du paragraphe "Comment mettre en oeuvre" sont données à titre indicatif. Les contenus des sous-paragraphes Implémentation et Exemple de bonne pratique ne présentent pas tous les codes d'implémentation.


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

Avertissement : le contenu du paragraphe "Illustrations" est donné à titre indicatif. Il ne présente pas tous les cas possibles.


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

revenir en haut de la page

Références

revenir en haut de la page

Fiche précédente : fiche du critère 5.5 Fiche suivante : fiche du critère 5.7

Guide AccessiWeb (version 3.1, 2 mars 2009) | Conditions d'utilisation | Contact
Copyright © 2009 Association BrailleNet. Tous droits Réservés.