# Guide AccessiWeb

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

## Fiche 5.2 : Dans un tableau de données, la balise CAPTION est-elle utilisée pour donner un titre au 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.2
- Niveau AccessiWeb : bronze
- Point(s) de contrôle WCAG 1.0 correspondants (Priorité 3 de WAI) : 5.5

revenir en haut de la page

### Comprendre

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

- Bénéfice 1 :
  Ceci fournit à l'utilisateur, de manière synthétique, une information sur ce qu'il va trouver dans le tableau, quelles sont les données qu'il présente.
- Bénéfice 2 :
  L'attribution de titres aux tableaux de données permet en outre de les différencier les uns des autres lorsqu'une page en contient plusieurs

#### Valeur ajoutée pour le site

- Bénéfice 1 :
  Lorsque le contenu de l'attribut `caption` est correctement renseigné, il permet un meilleur référencement de la page et des tableaux de données qu'elle comporte.

revenir en haut de la page

### Comment évaluer

#### Par le code source

1. Pour chaque tableau de données, vérifier la présence de la balise `CAPTION` placée après la balise ouvrante de l'élément `TABLE`.

#### 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.2.
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 la balise `CAPTION` est présente et renseignée avec pertinence.
   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 `CAPTION` et `/CAPTION`, ainsi que la pertinence du texte qu'elles entourent.

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(s) tableau(x) de données.
4. Vérifier que la balise `CAPTION` est présente et renseignée avec pertinence.

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

Méthode 1 :

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" le mot caption. 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, identifier si du texte est entouré d'un liseret rouge (la balise `CAPTION` est inscrite dans le liseret rouge) et vérifier la pertinence du texte.
   Note: Appuyer sur la touche F5 pour enlever le(s) liseret(s) rouge(s) de la page.

Méthode 2 :

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. Pour les tableaux de données, vérifier la présence des balises `CAPTION` et `/CAPTION`, ainsi que la pertinence du texte qu'elles entourent.

##### Evaluer avec le lecteur d'écran Jaws (version 5 et 6.2 en français) :

1. Ouvrir la page à analyser contenant au moins un tableau de données sous Internet Explorer.
2. Selon la version de Jaws, taper la lettre T, E ou Y du clavier pour passer de tableau en tableau.
3. Lorsque la balise `CAPTION` est associée à un tableau, et correctement remplie, Jaws prononce "légende", suivi du contenu de la balise.

revenir en haut de la page

### Comment mettre en oeuvre

#### Qui est concerné ?

Le développeur web, l'intégrateur HTML implémentent et évaluent ce critère.

#### Implémentation

La balise `CAPTION` doit être insérée après la balise d'ouverture `TABLE`. Syntaxe générale :

<table summary="résumé du tableau">
<caption>titre du tableau</caption>
[contenu du tableau]
</table>

#### Exemple de mauvaise pratique

Dans l'exemple qui suit, nous avons une structure de tableau de données. Or celui-ci ne comporte pas de titre. Un tel doit doit être incorporé par les balises `CAPTION` et `/CAPTION`.

<table summary="le tableau vous donne les températures moyennes de paris pour les années 2000, 2001, 2002. la première colonne comprend les mois, la seconde l'année 2000, la seconde l'année 2001, la dernière l'année 2002.">
<tr>
<th>titre 1</th <th>Titre 2</th>
</tr>
...
</table>

#### Exemple de bonne pratique

En corrigeant l'exemple précédant, un titre est associé au tableau et indique clairement les données qu'il représente.

<table summary="le tableau vous donne les températures moyennes de paris pour les années 2000, 2001, 2002. la première colonne comprend les mois, la seconde l'année 2000, la seconde l'année 2001, la dernière l'année 2002.">
<caption>températures moyennes de paris </caption>
<tr>
<th>titre 1</th <th>Titre 2</th>
</tr>
...
</table>

revenir en haut de la page

### Illustrations

Cette capture d'écran présente la façon dont s'affiche le titre du tableau de données, cité en exemple de code, concernant les températures de la semaine pour les ville de Paris, Strasbourg et Toulouse.

revenir en haut de la page

### Références

#### Autres fiches à consulter

- Fiche 5.1 : L'attribut SUMMARY est-il présent et pertinent ?
- Fiche 5.3 : Dans les tableaux de données, y a t-il des en-têtes de colonnes appropriés ?

#### Autres ressources

- html Techniques (section 5.1.1) Providing summary information
- html specifications : Tables in html documents
- Web Content Accessibility Curriculum (section 5.1) : For data tables, identify row and column headers
- 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