Votre navigateur n'accepte pas les coockies
Accueil

Accessibilité : Les tableaux simples

1-La problèmatique

Les tableaux de données constituent un environnement complexe pour les utilisateurs aveugles ou malvoyants, parce qu‘ils ne peuvent en avoir une vision globale qui leur permettrait d‘en comprendre facilement l‘organisation.

Pour qu‘un lecteur d‘écran soit en mesure de percevoir les relations entre les données et les en-têtes qui leur donnent un sens, les cellules d‘en-tête doivent être distinguées des cellules de données, et les relations entre les cellules doivent être explicitées lorsqu‘il s‘agit de tableaux complexes.

2-La solution

Tableaux simples

Pour un tableau simple, il s‘agit seulement de distinguer les cellules d‘en-tête <th> des cellules de données <td>. Les lecteurs d‘écran pourront ainsi indiquer à l‘utilisateur le titre de la colonne ou de la ligne où il se trouve.

Il faut faire ici une distinction entre tableau simple et tableau régulier. Un tableau simple peut très bien être irrégulier, c‘est-à-dire qu‘il peut comporter un nombre variable de rangées et de colonnes à cause de la présence de cellules fusionnées horizontalement ou verticalement.

Toutefois, un tableau régulier qui comporte un nombre constant de rangées et de colonnes est toujours moins déroutant et donc plus facile à comprendre qu‘un tableau irrégulier.

Titre

Si un titre de tableau est utilisé, il ne doit pas être inclus dans le tableau (par exemple dans une cellule fusionnée occupant toute la première rangée), mais présenté avec l‘élément <caption>.

À moins que la structure du document ne l‘indique, un titre de tableau devrait être codé avec l‘élément <caption> plutôt qu‘avec un en-tête de section.

Pour un tableau simple, il suffit d‘identifier les cellule d‘en-têtes de lignes et de colonnes (voir la technique H43 cités plus bas).

Exemple de code pour les cellules d‘en-tête et les cellules de données

<table>
<tr>
<th>Date</th>
<th>Sujets</th>
</tr>
<tr>
<td>22 février</td>
<td>Module 3</td>
</tr>
<tr>
<td>23 février</td>
<td>Module 4</td>
</tr>
</table>
Date Sujets
22 février Module 3
23 février Module 4

Tableaux complexes

Un tableau complexe de données se distingue par le fait qu‘il comporte plus d‘une rangée d‘en-têtes ou plus d‘une colonne d‘en-têtes ou par le fait qu‘au moins une cellule de donnée réfère à plus de deux cellules d‘en-têtes.

Un tableau complexe de données peut être régulier ou non, c‘est-à-dire qu‘il peut comporter ou non un nombre constant de rangées et de colonnes.

Le fait qu‘un tableau soit irrégulier ne suffit pas à le classer parmi les tableaux complexes, mais cette irrégularité ajoute certainement un niveau de difficulté supplémentaire pour l‘utilisateur et devrait être évitée lorsque c‘est possible. Notons d‘ailleurs que les lecteurs d‘écran ont de la difficulté avec les cellules fusionnées dans les tableaux complexes, JAWS est le meilleur dans ce domaine mais a de la difficulté à gérer les cellules fusionnées verticalement.

Il est donc important, chaque fois que possible, de concevoir des tableaux qui soient à la fois simples et réguliers.

Notons aussi qu‘il est possible d‘offrir une version de rechange où l‘on résume l‘ensemble des titres en une seule rangée et en une seule colonne et où l‘on éclatera toutes les cellules fusionnées en répétant leur contenu autant de fois que nécessaire. Si l‘on choisit cette approche, il faut offrir un lien vers cette version simplifiée immédiatement avant l‘entrée dans le tableau de données complexe. Ce lien devrait conduire à une autre page qui devrait comporter un lien pour revenir à la page orginale, mais à la fin du tableu.

Exemple de simplification d‘un tableau complexe

Version complexe :

 

 

Produits importés

Produits locaux

 

 

Fraises

Cerises

Fraises

Cerises

 

 

 

Catégorie A

Catégorie B

 

Catégorie A

Catégorie B

Cannes

En gros

1,00 €

3,00 €

2,00 €

1,20 €

3,00 €

2,00 €

Au détail

2,00 €

4,00 €

3,00 €

2,40 €

4,00 €

3,00 €

Nice

En gros

1,50 €

S/O

3,00 €

2,00 €

4,00 €

3,00 €

Au détail

2,50 €

S/O

4,00 €

2,60 €

5,00 €

4,00 €

Version simplifiée :

 

Produits importés, Fraises

Produits importés, Cerises, Catégorie A

Produits importés, Cerises, Catégorie B

Produits locaux, Fraises

Produits locaux, Cerises, Catégorie A

Produits locaux, Cerises, Catégorie B

Cannes, En gros

1,00 €

3,00 €

2,00 €

1,20 €

3,00 €

2,00 €

Cannes, Au détail

2,00 €

4,00 €

3,00 €

2,40 €

4,00 €

3,00 €

Nice, En gros

1,50 €

S/O

3,00 €

2,00 €

4,00 €

3,00 €

Nice, Au détail

2,50 €

S/O

4,00 €

2,60 €

5,00 €

4,00 €

Pour les tableaux complexes de données, vous devez associer explicitement toutes les cellules (sauf celles de la première ligne et de la première colonne) avec toutes les cellules d‘en-têtes correspondantes.

Il faut donc d‘abord assigner un attribut id unique (pour l‘ensemble de la page) à chaque cellule d‘en-tête.

Par la suite, il faut incorporer un attribut headers à chaque cellule de données. Cet attribut placera entre guillemets, séparés par un espace, tous les id des cellules de titre qui s‘appliquent à la cellule courante.

Ce travail doit habituellement être réalisé à la main directement dans le code, car la plupart des logiciels auteurs n‘ont pas prévu d‘interface pour le faire. Il existe toutefois un outil développé par Vision Australia (en anglais seulement) qui permet, non seulement d‘évaluer un tableau complexe, mais aussi de le coder manuellement ou automatiquement avec les attributs id et headers. Vous le trouverez à cette adresse : Complex Data Table Markup Toolbar.

Pour plus de détails et des exemples, consultez la technique : H43: Using id and headers attributes to associate data cells with header cells in data tables.

Exemple de code pour l‘utilisation de id et headers

<tr>
<th id="l1c1">Destination</th>
<th id="l1c2">Dates du déplacement</th>
<th id="l1c3">Repas</th>
<th id="l1c4">Hôtel</th>
<th id="l1c5">Transport</th>
<th id="l1c6">Total</th>
</tr>
<tr>
<th id="l2c1" headers="l1c1" rowspan="3">Nice</th>
<th id="l2c2" headers="l1c2 l2c1">25 août</th>
<td headers="l1c3 l2c1 l2c2">37</td>
<td headers="l1c4 l2c1 l2c2">112</td>
<td headers="l1c5 l2c1 l2c2">45</td>
<td headers="l1c6 l2c1 l2c2"> </td>
</tr>
<tr>
<th id="l3c2" headers="l1c2 l2c1">26 août</th>
<td headers="l1c3 l2c1 l3c2">27</td>
<td headers="l1c4 l2c1 l3c2">112</td>
<td headers="l1c5 l2c1 l3c2">45</td>
<td headers="l1c6 l2c1 l3c2"> </td>
</tr>
Rapport des frais de voyage
Destination Dates du déplacement Repas Hôtel Transport Total
Nice 25 août 37 112 45
26 août 27 112 45

Sommaire et légende

Les tableaux de données complexes d‘un site Web public ont besoin d‘un sommaire, et peuvent également bénéficier d‘une légende.

Le sommaire peut compenser le manque de vision globale de l‘utilisateur non-voyant en donnant une brève description de l‘organisation du tableau. Il est inscrit dans l‘attribut summary et peut être aussi long que nécessaire.

Un bon sommaire doit décrire les grandes catégories d‘informations présentées par colonne et par ligne, et signaler les irrégularités éventuelles correspondant aux cellules fusionnées.

L‘effet recherché ici est une vue d‘ensemble, c‘est pourquoi il n‘est pas utile de reprendre dans le sommaire tous les titres de colonne et de ligne, mais plutôt d‘en décrire les grandes catégories.

La légende, quant à elle, est une information complémentaire qui vient chapeauter un tableau à la façon d‘un titre. Elle s‘inscrit dans l‘élément <caption>, qui doit être placé immédiatement sous l‘élément <table>.

ATTENTION :

Exemple de code pour l‘utilisation d‘un sommaire et d‘une légende

<table summary="Ce tableau présente les frais de voyage. Par lignes, vous trouverez les destinations et les dates ainsi qu‘un grand total. Par colonnes, sont présentées les catégories de dépenses ainsi qu‘un total. Notez que la première colonne comporte des cellules fusionnées.> <caption>Rapport des frais de voyage</caption></table> [...]

Abréviations

Quand les titres des colonnes ou des lignes sont longs, et qu‘il serait fastidieux pour l‘utilisateur d‘entendre répéter cette information à plusieurs reprises, il est préférable d‘utiliser des abréviations. Par exemple, « Estimation des dépenses pour les soins de santé par les agences du Gouvernement durant la prochaine décennie » pourrait être abrégé par : « Estimation des dépenses ».

De même, si un tableau comporte déjà des abréviations dans les cellules d‘en-tête, on peut utiliser cette même technique pour en donner une interprétation plus compréhensible. Par exemple, un calendrier dont les jours de la semaine sont identifiés par deux lettres seulement (lu, ma, me, etc.) et qui serait donc peu compréhensible en synthèse vocale.

ATTENTION : Les abréviations utilisées dans les cellules d‘en-têtes ne sont reconnues par JAWS que dans les tableaux codés avec les attributs id et headers.

Dans un tableau de données simple, il vaut donc mieux utiliser la balise <abbr> plutôt que l‘attribut du même nom.

Exemples de code pour l‘utilisation d‘abréviations

<th abbr="Estimation des dépenses de santé"> Estimation des dépenses pour les soins de santé par le gouvernement durant la prochaine décennie</th> ou <th abbr="lundi">lu</th>

3-Plus loin...

Les attributs d’un tableau

Voici un tableau simple qui montre certaines des caractéristiques d’un modèle de tableau HTML. Soit le tableau suivante :

<table border="1"
  	summary="Statistiques concernant l’expédition des colis d’une entreprise : hauteur et poids moyens, et le pourcentage de ceux expédiés en urgence (vers la France ou l’étranger).">
<caption>Une table test avec des cellules fusionnées</caption>
<tr>
	<th rowspan="2"></th>
	<th colspan="2">Moyenne</th>
	<th rowspan="2">Urgence</th>
</tr>
<tr>
	<th>hauteur</th>
	<th>poids</th>
</tr>
<tr>
	<th>France</th>
	<td>15 cm</td>
	<td>0.512</td>
	<td>46%</td>
</tr>
<tr>
	<th>Étranger</th>
	<td>23 cm</td>
	<td>1.206</td>
	<td>27%</td>
</tr>
</table>

celui-ci pourrait être restitué par un téléimprimeur [ndt. tty device] comme ceci :

Un tableau test avec des cellules fusionnées
    /-----------------------------------------\
    |          |      Moyenne      |          |
    |          |-------------------|  Urgence |
    |          | hauteur |  poids  |          |
    |-----------------------------------------|
    | France   | 15 cm   | 0.512   |   46%    |
    |-----------------------------------------|
    | Étranger | 23 cm   | 1.206   |   27%    |
    \-----------------------------------------/

ou comme cela par un agent utilisateur graphique :

Un tableau test avec des cellules fusionnées
Moyenne Urgence
hauteur poids
France 15 cm 0.512 46%
Étranger 23 cm 1.206 27%

L’association des indications de rubrique aux cellules de données

Les agents utilisateurs non-visuels, tels que les synthétiseurs de parole et les lecteurs Braille, peuvent faire appel aux attributs suivants des éléments TD et th pour restituer les cellules de la table plus intuitivement :

  • Pour une cellule de données particulière, l’attribut headers liste les cellules qui fournissent des indications de rubrique pertinentes. Dans ce but, chaque cellule de rubrique doit être nommée en utilisant l’attribut id. Remarquez qu’il n’est pas toujours possible de distinguer clairement les cellules de rubrique de celles de données. On devrait utiliser l’élément TD pour de telles cellules en même temps que les attributs id ou scope, selon celui qui convient ;
  • Pour une cellule de rubrique donnée, l’attribut scope indique à l’agent utilisateur les cellules qui sont concernées par ces indications de rubrique. Les auteurs peuvent choisir d’employer cet attribut plutôt que l’attribut headers, selon celui qui convient le mieux ; les deux attributs remplissent la même fonction. L’attribut headers est en général nécessaire quand les rubriques se trouvent en positions inhabituelles par rapport aux données qui les concernent ;
  • L’attribut abbr spécifie un nom de rubrique abrégé pour les cellules de rubrique, de sorte que les agents utilisateurs puissent restituer les indications de rubrique plus rapidement.

Dans l’exemple suivant, nous assignons des indications de rubrique aux cellules, en définissant l’attribut headers. Chaque cellule dans la même colonne se rapporte à la même cellule de rubrique (via l’attribut id).

<TABLE border="1" 
       summary="Cette table représente le nombre de tasses de café
                consommées par chaque sénateur,
                le type de café (décafféiné ou normal),
                et s’il est sucré ou non.">
<CAPTION>Les tasses de café consommées par chaque sénateur</CAPTION>
<tr>
   <th id="t1">Nom</th>
   <th id="t2">Tasses</th>
   <th id="t3" abbr="Type">Type de café</th>
   <th id="t4">Sucre ?</th>
<tr>
   <TD headers="t1">T. Sexton</TD>
   <TD headers="t2">10</TD>
   <TD headers="t3">Espresso</TD>
   <TD headers="t4">Non</TD>
<tr>
   <TD headers="t1">J. Dinnen</TD>
   <TD headers="t2">5</TD>
   <TD headers="t3">Déca.</TD>
   <TD headers="t4">Oui</TD>
</TABLE>

Un synthétiseur de parole pourrait restituer cette table comme suit :

Légende : Les tasses de café consommées par chaque sénateur
Résumé : Cette table représente le nombre de tasses de café
         consommées par chaque sénateur, le type de café (déca. ou normal),
         et s’il est sucré ou non.
Nom : T. Sexton,   Tasses : 10,   Type : Espresso,   Sucre : Non
Nom : J. Dinnen,   Tasses : 5,    Type : Déca.,      Sucre : Oui

Remarquer la manière dont la rubrique « Type de café » s’abrège en « Type », en utilisant l’attribut abbr.

Le même exemple, en substituant l’attribut scope à l’attribut headers. Remarquez la valeur "col" de l’attribut scope, qui signifie « toutes les cellules dans la colonne courante » :

<TABLE border="1" 
       summary="Cette table représente le nombre de tasses de café
                consommées par chaque sénateur,
                le type de café (décafféiné ou normal),
                et s’il est sucré ou non.">
<CAPTION>Les tasses de café consommées par chaque sénateur</CAPTION>
<tr>
   <th scope="col">Nom</th>
   <th scope="col">Tasses</th>
   <th scope="col" abbr="Type">Type de café</th>
   <th scope="col">Sucre ?</th>
<tr>
   <td>T. Sexton</td>
   <td>10</td>
   <td>Espresso</td>
   <td>Non</td>
<tr>
   <td>J. Dinnen</td>
   <td>5</td>
   <td>Déca.</td>
   <td>Oui</td>
</TABLE>

Voici un exemple un peu plus complexe illustrant l’utilisation des autres valeurs de l’attribut scope :

<TABLE border="1" cellpadding="5" cellspacing="2"
  summary="Les cours d’histoire proposés dans la communauté
           de Bath, arrangés selon le nom du cours, le professeur,
           le résumé, le code et le prix.">
  <tr>
    <th colspan="5" scope="colgroup">Cours communautaires -- Bath Automne 1997</th>
  </tr>
  <tr>
    <th scope="col" abbr="Nom">Nom du cours</th>
    <th scope="col" abbr="Prof.">Professeur</th>
    <th scope="col">Résumé</th>
    <th scope="col">Code</th>
    <th scope="col">Frais</th>
  </tr>
  <tr>
    <td scope="row">àprès la Guerre Civile</td>
    <td>Dr. John Wroughton</td>
    <td>
       Ce cours étudiera les années de troubles qui ont
       suivi l’année 1646 en Angleterre. <EM>6 réunions hebdomadaires,
      début lundi 13 octobre.</EM>
    </td>
    <td>H27</td>
    <td>&pound;32</td>
  </tr>
  <tr>
    <td scope="row">Introduction &agrave; l’Angleterre anglo-saxonne</td>
    <td>Mark Cottle</td>
    <td>
       Un cours d’une journée présentant les premiers temps de
       la période de reconstruction médiévale,
       les Anglo-saxons et leur société.<br>
       <EM>Samedi 18 octobre.</EM>
    </td>
    <td>H28</td>
    <td>&pound;18</td>
  </tr>
  <tr>
    <td scope="row">La Gr&Egrave;ce glorieuse</td>
    <td>Valérie Lorenz</td>
    <td>
     Les origines de la démocratie, la philosophie, le c&#339;ur du thé&acirc;tre,
     la patrie de la dialectique. Les Romains auraient pu le faire, mais les
     Grecs furent les premiers. <br><EM>Samedi 25 octobre 1997</EM>
    </td>
    <td>H30</td>
    <td>&pound;18</td>
  </tr>
</TABLE>