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.2

Critère 5.2 : Pour chaque tableau ayant un attribut summary, le contenu de cet attribut est-il pertinent ?

revenir en haut de la page

Carte d'identité du critère 5.2 [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 :
   • Identifier dans un navigateur graphique les tableaux de mise en forme et 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 : balise table (par exemple: <table summary="résumé du tableau"> <caption>titre du tableau</caption> [...] </table>).
   
   
   
2. Appliquer le(s) test(s) suivant(s) :
   • Test 5.2.a [Or] : Pour chaque tableau de données (balise table) ayant un attribut summary, le contenu de cet attribut est-il pertinent ?
   • Test 5.2.b [Or] : Pour chaque tableau de mise en forme (balise table) ayant un attribut summary, le contenu de cet attribut est-il vide (summary="") ?
   
   
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.2.a [Or] :
  1. Sous Internet Explorer, ouvrir la page à analyser.
  2. 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"
  3. Des informations sur la structure de chaque tableau de données s'affichent
  4. Vérifier pour que chaque balise table (tableau de données) ayant un attribut summary, le contenu de cet attribut est pertinent.
  5. Si c'est le cas, le test est validé.
  
  
• Pour le test 5.2.b [Or] :
  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 pour que chaque balise table (tableau de mise en forme) ayant un attribut summary, le contenu de cet attribut est vide (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) :

• Pour le test 5.2.a [Or] :
  1. Sous Firefox, ouvrir la page à analyser.
  2. Vérifier la présence de tableaux de données dans la page.
  3. Dans le menu "Informatione" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Afficher les informations des tableaux".
  4. Le contenu de l'attribut summary apparaît sur un fond jaune, sous la forme : "Summary=contenu du summary" (note : si le contenu de l'attribut summary est vide (de type summary=""), l'information affichée sera "Summary=").
  5. Vérifier pour que chaque balise table (tableau de données) ayant un attribut summary, le contenu de cet attribut est pertinent.
  6. Si c'est le cas, le test est validé.
  
  
• Pour le test 5.2.a [Or] :
  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 pour que chaque balise table (tableau de mise en forme) ayant un attribut summary, le contenu de cet attribut est vide (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 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.

Exemple de mauvaise pratique

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

  <table summary="page Web">
  <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">
  <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 résumé de tableau de données pertinent (format mp3, 90 ko)

Un mauvais résumé de tableau (format mp3, 60 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