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.9 : Pour chaque tableau de données, lorsqu'un en-tête de colonnes ou un en-tête de lignes a un attribut abbr, le contenu de cet attribut est-il pertinent ?

revenir en haut de la page

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

revenir en haut de la page

Comprendre

Comprendre le critère

Tous les attributs abbr des en-têtes de colonne et/ou des en-têtes de ligne des tableaux de données doivent être pertinents, c'est-à-dire que le contenu de l'attribut abbr doit avoir un maximum de 15 caractères, décrire l'information véhiculée par le contenu de l'en-tête auquel il se rattache (contenu entre les balises th et /th) et être unique dans la page Web.

Bénéfices pour les utilisateurs

• L'utilisation de l'attribut abbr permet un confort de lecture supplémentaire pour les utilisateurs de synthèses vocales. En effet, quand le titre de colonne est long (exemple : Marque du véhicule), l'attribut abbr va obliger la synthèse vocale à n'annoncer que le mot "marque".
  Il faut veiller à ce que le contenu de l'attribut abbr des balises th soit pertinent et en rapport avec le contenu de l'en-tête de colonne auquel il se réfère. De plus, il doit être unique au sein d'un même tableau.

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, puis identifier les cellules qui sont des en-têtes de colonnes et/ou des en-têtes de lignes.
   • 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 données : <table summary="résumé du tableau"><caption>Titre du tableau</caption).
   
   
   
2. Appliquer le(s) test(s) suivant(s) :
   • Test 5.9.a [Or] : Pour chaque tableau de données (balise table), pour chaque en-tête de colonnes ou chaque en-tête de lignes (balise th) ayant un attribut abbr, le contenu de cet attribut a-t-il une longueur maximum de 15 caractères ?
   • Test 5.9.b [Or] : Pour chaque tableau de données (balise table), pour chaque en-tête de colonnes ou chaque en-tête de lignes (balise th) ayant un attribut abbr, le contenu de cet attribut est-il explicite ?
   • Test 5.9.c [Or] : Pour chaque tableau de données (balise table), pour chaque en-tête de colonnes ou chaque en-tête de lignes (balise th) ayant un attribut abbr, le contenu de cet attribut est-il unique ?
   
   
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.9.a [Or] :
  1. Sous Internet Explorer, ouvrir la page à analyser.
  2. Repérer les tableaux de données présents sur la page.
  3. Dans chaque tableau de données, repérer les en-têtes de colonnes et/ou les en-têtes de lignes.
  4. 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"
  5. Des informations sur la structure de chaque tableau de données s'affichent
  6. Repérer tous les en-têtes de colonnes et/ou en-têtes de lignes dont l'intitulé dépasse 15 caractères
  7. Puis, 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é"
  8. Rechercher dans le code source les attributs abbr
  9. Vérifier que dans chaque tableau de données, pour chaque en-tête de colonnes et/ou chaque en-tête de lignes ayant un attribut abbr, le contenu de cet attribut a une longueur maximum de 15 caractères.
  10. Si c'est le cas, le test est validé.
  
  
• Pour le test 5.9.b [Or] :
  1. Sous Internet Explorer, ouvrir la page à analyser.
  2. Repérer les tableaux de données présents sur la page.
  3. Dans chaque tableau de données, repérer les en-têtes de colonnes et/ou les en-têtes de lignes.
  4. 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"
  5. Des informations sur la structure de chaque tableau de données s'affichent
  6. Repérer tous les en-têtes de colonnes et/ou en-têtes de lignes dont l'intitulé dépasse 15 caractères
  7. Puis, 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é"
  8. Rechercher dans le code source les attributs abbr
  9. Vérifier que dans chaque tableau de données, pour chaque en-tête de colonnes et/ou chaque en-tête de lignes ayant un attribut abbr, le contenu de cet attribut est explicite.
  10. Si c'est le cas, le test est validé.
  
  
• Pour le test 5.9.c [Or] :
  1. Sous Internet Explorer, ouvrir la page à analyser.
  2. Repérer les tableaux de données présents sur la page.
  3. Dans chaque tableau de données, repérer les en-têtes de colonnes et/ou les en-têtes de lignes.
  4. 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"
  5. Des informations sur la structure de chaque tableau de données s'affichent
  6. Repérer tous les en-têtes de colonnes et/ou en-têtes de lignes dont l'intitulé dépasse 15 caractères
  7. Puis, 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é"
  8. Rechercher dans le code source les attributs abbr
  9. Vérifier que dans chaque tableau de données, pour chaque en-tête de colonnes et/ou chaque en-tête de lignes ayant un attribut abbr, le contenu de cet attribut est unique.
  10. 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.9.a [Or] :
  1. Sous Firefox, 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 dans chaque tableau de données, pour chaque en-tête de colonnes et/ou chaque en-tête de lignes ayant un attribut abbr, le contenu de cet attribut a une longueur maximum de 15 caractères.
  6. Si c'est le cas, le test est validé.
  
  
• Pour le test 5.9.b [Or] :
  1. Sous Firefox, 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 dans chaque tableau de données, pour chaque en-tête de colonnes et/ou chaque en-tête de lignes ayant un attribut abbr, le contenu de cet attribut est explicite.
  6. Si c'est le cas, le test est validé.
  
  
• Pour le test 5.9.c [Or] :
  1. Sous Firefox, 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 dans chaque tableau de données, pour chaque en-tête de colonnes et/ou chaque en-tête de lignes ayant un attribut abbr, le contenu de cet attribut est unique.
  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é ?

L'implémentation de l'attribut abbr pour les longs en-têtes de tableaux doit être faite par le développeur.

Implémentation

Syntaxe générale :

<th abbr="Production 1995">Production année 1995</th>

Remarque : la balise td supporte aussi l'attribut abbr.

Exemple de mauvaise pratique

Voici le code d'un tableau restituant les résultats d'une requête sur une base de données :

<table summary="Résultats de la recherche dans la base de données clients">
<caption>Résultats de votre requête</caption>
<tr>
<th id="nom">Nom</th>
<th id="prenom">prénom</th>
<th id="tel_perso" abbr="tél. pro">Téléphone personnel</th>
<th id="tel_pro" abbr="tél. perso">Téléphone professionnel</th>
</tr>
<tr>
<td headers="nom"> </td>
<td headers="prenom"> </td>
<td headers="tel_perso"> </td>
<td headers="tel_pro"> </td>
</tr>
</table>

Dans l'exemple ci-dessus, les titres de colonne "Téléphone personnel" et "Téléphone professionnel" dépassent 15 caractères, sont abrégés mais le contenu de l'attribut abbr n'est pas correct (inversion).

Exemple de bonne pratique

Le principal est de choisir une valeur distinctive pour l'abréviation. Il ne s'agira que d'un rappel de l'en-tête ou de la cellule associée à une autre cellule. Il faut que le terme choisi permette d'identifier sans équivoque la cellule par rapport aux cellules sémantiquement proches. Par exemple, dans l'extrait de code qui suit, la colonne "téléphone personnel" et "téléphone professionnel" dépassent 15 caractères et doivent être abrégés de manière distinctive.

<table summary="Résultats de la recherche dans la base de données clients">
<caption>Résultats de votre requête</caption>
<tr>
<th id="nom">Nom</th>
<th id="prenom">prénom</th>
<th id="tel_perso" abbr="tél. perso">Téléphone personnel</th>
<th id="tel_pro" abbr="tél. pro">Téléphone professionnel</th>
</tr>
<tr>
<td headers="nom"> </td>
<td headers="prenom">&nbps;</td>
<td headers="tel_perso">&nbps;</td>
<td headers="tel_pro"> </td>
</tr>
</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.

Des titres de colonnes abrégés lorsque cela est nécessaire (format mp3, 50 ko)

revenir en haut de la page

Références

• html techniques for WCAG 1.0 (section 5.1) data table
• html specifications : Définition de abbr (anglais)

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.