# Guide AccessiWeb

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

## Fiche 5.1 : L'attribut SUMMARY est-il présent et pertinent ?

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.1
- 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 :
  L'attribut `summary` fournit aux utilisateurs de navigateurs vocaux et lecteurs d'écran un résumé des informations contenues dans le tableau.
  C'est la première information qui sera lue lors de la lecture d'un tableau.
- Bénéfice 2 :
  L'attribut `summary` permet à l’utilisateur de se représenter la fonction et la structure du tableau. Sans cela, l’interprétation des tables aux structures relativement complexes (et la navigation en leur sein) peut s'avérer difficile et/ou pénible pour les personnes n’ayant qu’une présentation linéaire du contenu.

#### Valeur ajoutée pour le site

- Bénéfice 1 :
  Lorsque le contenu de l'attribut `summary` 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. Il faut vérifier dans chaque balise `TABLE` de la page, la présence de l'attribut `summary`.
2. Ensuite il faut se poser la question de la pertinence du contenu de l'attribut `summary` en fonction du type de tableau.

#### 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.1.
3. Le code source de la page s'affiche dans une nouvelle fenêtre.
4. Vérifier dans chaque balise `TABLE` de la page la présence de l'attribut `summary`.
5. Ensuite, il faut se poser la question de la pertinence du contenu de l'attribut `summary` en fonction du type de tableau (pour un tableau de mise en forme: `summary`="" et pour un tableau de données: le contenu du `summary` doit donner la fonction et la structure du tableau).

##### Evaluer avec la barre d'accessibilité AIS pour Internet Explorer (version 1.2 en français) :

1. Cliquer sur le menu "Source", puis sur l'option "Voir le code source [Nouvelle fenêtre]".
2. Il faut vérifier dans chaque balise `TABLE` de la page la présence de l'attribut `summary`.
3. Ensuite il faut se poser la question de la pertinence du contenu de l'attribut `summary` en fonction du type de tableau (pour un tableau de mise en forme: summary="" et pour un tableau de données: le contenu du `summary` doit donner la fonction et la structure du tableau).

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

1. Activer l'option "Voir Source" du menu "Voir Source".
2. Une nouvelle fenêtre apparaît et affiche le code source.
3. Il faut vérifier dans chaque balise `table` de la page la présence de l'attribut `summary`.
4. Ensuite il faut se poser la question de la pertinence du contenu de l'attribut `summary` en fonction du type de tableau (pour un tableau de mise en forme: summary="" et pour un tableau de données : le contenu du `summary` doit donner la fonction et la structure du tableau).

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

1. Ouvrir la page à analyser sous Internet Explorer.
2. Passer de tableau en tableau en appuyant sur la touche T, la touche E ou la touche Y (selon la version de Jaws utilisée).
3. Si l'attribut `summary` est rempli par du texte, Jaws lira son contenu juste après avoir indiqué le tableau, son nombre de lignes et de colonnes et le mot "sommaire".

revenir en haut de la page

### Comment mettre en oeuvre

#### Qui est concerné ?

C'est le développeur HTML qui va implémenter ce critère. Tandis que le rédacteur veillera à la pertinence du texte associé à cet attribut.

#### Implémentation

Chaque balise `TABLE` doit contenir l'attribut `summary` renseigné ou non selon le tableau :

1. dans le cas d'un tableau de mise en forme, l'attribut `summary` doit être vide :

   <table summary="">

2. Dans le cas d'un tableau de données, l'attribut `summary` doit être renseigné. Il doit signaler la fonction et la structure du tableau. Il faut faire attention à ne pas donner un long `summary`.

#### Exemple de mauvaise pratique

- Tableau de mise en forme d'une page Web :

  <table>
  <tr>
  <td>espace pour le menu principal</td>
  <td>contenu 1</td>
  <td>contenu 2</td>
  </tr>
  </table>

- Tableau de mise en forme d'un menu :

  <table>
  <tr>
  <td>item 1</td>
  <td> item 2</td>
  <td> item 3</td>
  </tr>
  <tr>
  <td><img src="item1.gif" class="nav" alt="" /></td>
  <td><img src="item2.gif" class="nav" alt="" /></td>
  <td><img src="item3.gif" class="nav" alt="" /></td>
  </tr>
  </table>

- Tableau de données :

  <table summary="températures de la semaine en fonction de la ville">
  <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">10°</td>
  <td headers="paris mardi">8°</td>
  <td headers="paris mercredi">10°</td>
  <td headers="paris jeudi">12°</td>
  <td headers="paris vendredi">10°</td>
  </tr>
  <!-- ligne 3: nom de la ville, données corespondantes -->
  <tr>
  <td headers="ville" id="toulouse">toulouse</td>
  <td headers="toulouse lundi">13°</td>
  <td headers="toulouse mardi">11°</td>
  <td headers="toulouse mercredi">12°</td>
  <td headers="toulouse jeudi">14°</td>
  <td headers="toulouse vendredi">12°</td>
  </tr>
  <!-- ligne 4: nom de la ville, données corespondantes -->
  <tr>
  <td headers="ville" id="strasbourg">strasbourg</td>
  <td headers="strasbourg lundi">7°</td>
  <td headers="strasbourg mardi">5°</td>
  <td headers="strasbourg mercredi">6°</td>
  <td headers="strasbourg jeudi">8°</td>
  <td headers="strasbourg vendredi">7°</td>
  </tr>
  </tbody>
  </table>

#### Exemple de bonne pratique

- Tableau de mise en forme d'une page Web :

  <table summary="">
  <tr>
  <td>espace pour le menu principal</td>
  <td>contenu 1</td>
  <td>contenu 2</td>
  </tr>
  </table>

- Tableau de mise en forme d'un menu :

  <table summary="menu principal">
  <tr>
  <td>item 1</td>
  <td> item 2</td>
  <td> item 3</td>
  </tr>
  <tr>
  <td><img src="item1.gif" class="nav" alt="" /></td>
  <td><img src="item2.gif" class="nav" alt="" /></td>
  <td><img src="item3.gif" class="nav" alt="" /></td>
  </tr>
  </table>

- Tableau de données :

  <table summary="température des 5 premiers jours de la semaine pour les villes de Paris, Toulouse et Strasbourg">
  <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">10°</td>
  <td headers="paris mardi">8°</td>
  <td headers="paris mercredi">10°</td>
  <td headers="paris jeudi">12°</td>
  <td headers="paris vendredi">10°</td>
  </tr>
  <!-- ligne 3: nom de la ville, données corespondantes -->
  <tr>
  <td headers="ville" id="toulouse">toulouse</td>
  <td headers="toulouse lundi">13°</td>
  <td headers="toulouse mardi">11°</td>
  <td headers="toulouse mercredi">12°</td>
  <td headers="toulouse jeudi">14°</td>
  <td headers="toulouse vendredi">12°</td>
  </tr>
  <!-- ligne 4: nom de la ville, données corespondantes -->
  <tr>
  <td headers="ville" id="strasbourg">strasbourg</td>
  <td headers="strasbourg lundi">7°</td>
  <td headers="strasbourg mardi">5°</td>
  <td headers="strasbourg mercredi">6°</td>
  <td headers="strasbourg jeudi">8°</td>
  <td headers="strasbourg vendredi">7°</td>
  </tr>
  </tbody>
  </table>

revenir en haut de la page

### Illustrations

Note : pour lire les extraits sonores au format mp3 proposés sur ce guide, vous devez disposer d'un lecteur capable de lire ce type de fichier. Les enregistrements ont été réalisés à partir soit de la synthèse vocale utilisée par Jaws, soit celle utilisée par Home Page Reader. Pour plus d'informations sur le téléchargement de lecteurs de fichiers mp3, consulter le paragraphe Lecteurs multimédia de la page Outils d'aide à l'évaluation de ce guide.

Un mauvais résumé de tableau (format mp3, 60 ko)

Voici ce que lit Jaws :
"Légende de la table : Températures de la semaine en fonction de la ville. Sommaire : Températures de la semaine en fonction de la ville."
Le contenu du résumé est strictement le même que celui du titre de tableau et n'apporte donc aucune information supplémentaire sur l'organisation du tableau.

Un résumé de tableau de données pertinent (format mp3, 90 ko)

Voici ce que lit Jaws :
"Légende de la table : Températures de la semaine en fonction de la ville. Sommaire : Températures des cinq premiers jours de la semaine pour les villes de Paris, Toulouse et Strasbourg."

revenir en haut de la page

### Références

#### Autres fiches à consulter

- Fiche 5.2 : Dans un tableau de données, la balise CAPTION est-elle utilisée pour donner un titre au tableau ?
- 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