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.
Identifier tous les éléments TABLE en faisant une recherche dans le code source.
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.
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).
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) :
Sous Internet Explorer, ouvrir la page à analyser.
Dans le menu "5. Tableaux" de la Barre AccessiWeb, activer le critère 5.3.
Les informations sur le(s) tableau(x) de données de la page s'affichent dans la page.
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 :
Repérer les tableaux de données présents sur la page.
A l'aide de la souris, sélectionner le ou les tableaux de données présent(s).
Cliquer sur le menu "Source", puis sur l'option "Voir le code source de la sélection [Nouvelle fenêtre]".
Vérifier la présence des balises TH et /TH sur la première rangée.
Méthode 2 :
Repérer les tableaux de données présents sur la page.
Activer l'option "Tableau de données complexe" du menu "Structure".
Ceci affiche les informations sur le tableau.
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) :
Activer l'option "Afficher le nom de l'élément entouré" du menu "Entourer".
Puis, activer l'option "Entourer un élément personnalisé ..." du menu "Entourer".
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.
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.
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>
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.