Guide AccessiWeb

1. Accueil
2. Mode d'emploi
3. Structure d'une fiche
4. Fiches AccessiWeb
   • 1) Images
   • 2) Cadres
   • 3) Couleurs
   • 4) Multimédia
   • 5) Tableaux
   • 6) Liens
   • 7) Code exécutable
   • 8) Eléments obligatoires
   • 9) Structuration de l'information
   • 10) Présentation de l'information
   • 11) Formulaires
   • 12) Navigation
   • 13) Consultation
5. Glossaire
6. Aide à l'évaluation
   • Liste d'outils
   • Manuel Code Source
   • Manuel WAT [Internet Explorer]
   • Manuel Web Dev [Firefox]
7. Référentiel AccessiWeb
   • AccessiWeb v1.1 [Général]
   • AccessiWeb v1.1 [Déployé]
   • AccessiWeb v1.0
8. Tables de correspondance
   • AW v1 vers AW v1.1 [Général]
   • AW v1.1 [Général] vers AW v1.1 [Déployé]
   • AW v1.1 [Général] vers WCAG 1.0
   • AW v1.1 [Général] vers UWEM 1.0
   • AW v1.1 [Déployé] vers UWEM 1.0
   • AW v1.1 [Général] vers WCAG 2.0
   • AW v1.1 [Général] vers mobileOK Basic 1.0
   • AW v1.1 [Général] vers RGAA
9. Moteur de recherche
10. Références
11. Remerciements
12. Plan du guide

Critère 5.7 : Pour chaque tableau de données, la technique appropriée permettant d'associer chaque cellule avec ses en-têtes est-elle utilisée ?

revenir en haut de la page

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

revenir en haut de la page

Comprendre

Comprendre le critère

Pour tous les tableaux de données, chaque cellule doit être associée avec ses en-têtes par la technique appropriée à la nature du tableau (tableaux de données à entrées uniques et tableaux de données à entrées uniques).

Bénéfices pour les utilisateurs

• 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ée 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

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.
   • Ouvrir le code source de la page Web et sélectionner le code de ces tableaux de données associé à tous les éléments suivants (par exemple: <table summary="résumé du tableau"> <caption>titre du tableau</caption> <thead><th id="identifiant_en_tete" abbr="abréviation">intitulé d'en-tête</th></thead> <tbody> <tr><td headers="identifiant_en_tete">contenu de la cellule</td></tr> </tbody> </table>) :
     • balise table
     • balise th
     • balise td
   
   
   
2. Appliquer le(s) test(s) suivant(s) :
   • Test 5.7.a [Bronze] : Pour chaque tableau de données (balise table), une technique permettant d'associer chaque cellule (balise td) avec ses en-têtes (balise th) est-elle utilisée (attributs id/headers ou attribut scope) ?
   • Test 5.7.b [Bronze] : Pour chaque tableau de données (balise table) ayant une technique permettant d'associer chaque cellule (balise td) avec ses en-têtes (balise th), cette technique est-elle appropriée ?
   • Test 5.7.c [Bronze] : Pour chaque tableau de données (balise table) ayant une technique permettant d'associer chaque cellule (balise td) avec ses en-têtes (balise th), cette technique est-elle correctement implémentée ?
   
   
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.7.a [Bronze] :
  1. Sous Internet Explorer, ouvrir la page à analyser.
  2. Repérer les tableaux de données présents sur la page.
  3. 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".
  4. Des informations sur la structure de chaque tableau de données s'affichent.
  5. Vérifier que pour chaque tableau de données, une technique permettant d'associer chaque cellule (balise td) avec ses en-têtes (balise th) est utilisée (attributs id/headers ou attribut scope).
  6. Si c'est le cas, le test est validé.
  
  
• Pour le test 5.7.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 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".
  4. Vérifier que pour chaque tableau de données ayant une technique permettant d'associer chaque cellule (balise td) avec ses en-têtes (balise th), cette technique est appropriée.
  5. Si c'est le cas, le test est validé.
  
  
• Pour le test 5.7.c [Bronze] :
  1. Sous Internet Explorer, ouvrir la page à analyser.
  2. Repérer les tableaux de données présents sur la page.
  3. 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".
  4. Des informations sur la structure de chaque tableau de données s'affichent.
  5. Vérifier que pour chaque tableau de données ayant une technique permettant d'associer chaque cellule (balise td) avec ses en-têtes (balise th), cette technique est correctement implémentée.
  6. 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.7.a [Bronze] :
  1. Sous Internet Explorer, 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, une technique permettant d'associer chaque cellule (balise td) avec ses en-têtes (balise th) est utilisée (attributs id/headers ou attribut scope).
  6. Si c'est le cas, le test est validé.
  
  
• Pour le test 5.7.b [Bronze] :
  1. Sous Internet Explorer, 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 ayant une technique permettant d'associer chaque cellule (balise td) avec ses en-têtes (balise th), cette technique est appropriée.
  6. Si c'est le cas, le test est validé.
  
  
• Pour le test 5.7.c [Bronze] :
  1. Sous Internet Explorer, 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 ayant une technique permettant d'associer chaque cellule (balise td) avec ses en-têtes (balise th), cette technique est correctement implémentée.
  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

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

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

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

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

revenir en haut de la page

Références

• html techniques for WCAG 1.0 (section 5.1.2) Providing summary information
• WAI Curriculum (section 5.1) : For data tables, identify row and column headers
• WAI Curriculum (section 5.2) : For data tables use markup to associate data cells and header cells
• html specifications : Tables in html documents

revenir au sommaire de la fiche

revenir en haut de la page

---

Guide AccessiWeb (version 3.0, 9 juin 2008) | Conditions d'utilisation | Contact
Copyright © 2008 Association BrailleNet. Tous droits Réservés.