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 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 cellules d'en-têtes de lignes et de colonnes (voir la technique H43).

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

<table>
  <thead>
    <tr>
      <th>Modules</th>
      <th>Heures</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Total</th>
      <th>26 h</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Module 1</td>
      <td>16 h</td>
    </tr>
    <tr>
      <td>Module 2</td>
      <td>10 h</td>
    </tr>
  <tbody>
</table>

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

Version complexe :

Version simplifiée :

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">194</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">184</td>
</tr>

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 :

• Vous ne devez pas inscrire un sommaire vide (summary="") pour les tableaux de présentation, parce que c'est un des critères utilisés par les lecteurs d'écran pour distinguer entre les tableaux de présentation et les tableaux de données. De même, les tableaux de mise en page doivent être exempts de titre <caption> et de cellules d'en-tête <th>.
• Des données tabulaires ne doivent pas être formatées avec des espaces pour simuler un balisage correct, car l'utilisateur ne pourrait naviguer de cellule en cellule dans un tel tableau avec un lecteur d'écran.

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

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

3.1 Les attributs d'un tableau.

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

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

<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),
<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>
</tr>
   <td headers="t1">T. Sexton</td>
   <td headers="t2">10</td>
   <td headers="t3">Espresso</td>
   <td headers="t4">Non</td>
<tr>
</tr>
   <td headers="t1">J. Dinnen</td>
   <td headers="t2">5</td>
   <td headers="t3">Déca.</td>
   <td headers="t4">Oui</td>
</table>
</tr>

<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.">
<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>
</tr>
    <td>T. Sexton</td>
    <td>10</td>
    <td>Espresso</td>
    <td>Non</td>
<tr>
</tr>
    <td>J. Dinnen</td>
    <td>5</td>
    <td>Déca.</td>
    <td>Oui</td>
</table>
</tr>

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>