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

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

Critère 5.1 : Chaque tableau a-t-il un attribut summary ?

revenir en haut de la page

Carte d'identité du critère 5.1 [niveau AccessiWeb : Or]

revenir en haut de la page

Comprendre

Comprendre le critère

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

• 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

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 : 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 mise en forme : <table summary="">).
   
   
2. Appliquer le(s) test(s) suivant(s) :
   • Test 5.1.a [Or] : Chaque tableau (balise table) a-t-il un attribut summary ?
   
   
3. Valider le critère : le critère est validé si vous répondez oui au test applicable précédent.

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) :

1. Sous Internet Explorer, ouvrir la page à analyser.
2. Dans le menu "Code source" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Voir le code source généré"
3. Rechercher dans le code source les balises table
4. Vérifier que chaque balise table a un attribut summary.
5. 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) :

1. Sous Firefox, ouvrir la page à analyser.
2. Dans le menu "Voir Source" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Voir Source".
3. Une nouvelle fenêtre apparaît contenant le code source de la page.
4. En faisant une recherche sur le mot table (ctrl + f), vérifier que chaque balise table a un attribut summary.
5. 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 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.

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="">
  <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

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

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

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

revenir en haut de la page

Références

• html techniques for WCAG 1.0 (section 5.1.1) Providing summary information
• html specifications : Tables in html documents
• WAI Curriculum (section 5.1) : For data tables, identify row and column headers

revenir en haut de la page