Tableaux de données complexes : comment les intégrer de manière accessible en HTML ?

Qu’est-ce qu’un tableau de données complexe ?

Un tableau de données complexe est un tableau :

• dont les en-têtes s’étendent sur plusieurs lignes ou colonnes ;
• et/ou dont les en-têtes de colonne ou de ligne ne s’appliquent pas à l’intégralité de la colonne ou de la ligne concernée, par exemple parce qu’il y a des cellules fusionnées et/ou des sous-contextes.

Exemple 1

Un tableau de données sur le site de l’Insee dont les colonnes, qui indiquent le nombre de nuitées par types d’hébergements, sont divisées en milliers et en pourcentages.

Exemple 2

Un tableau de données complexe qui aurait éventuellement pu être scindé en deux tableaux, « Disponibilité des logements de vacances à Paris » et « Disponibilité des logements de vacances à Rome ». L’exemple est adapté depuis le tutoriel de la WAI (en anglais).

<table>
  <caption>
    <h4>Disponibilité des logements de vacances</h4>
    <p>Les colonnes indiquent le type de logement. Les en-têtes de ligne de la première moitié du tableau concernent les disponibilités à Paris. Les en-têtes de ligne de la seconde moitié concernent les logements à Rome.</p>
  </caption>
  <thead>
    <tr>
      <td aria-hidden="true"></td>
      <th id="id1">Studio</th>
      <th id="id2">Appartement</th>
      <th id="id3">Chalet</th>
      <th id="id4">Villa</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th id="id5" colspan="5">Paris</th>
    </tr>
    <tr>
      <th id="id6">1 chambre</th>
      <td headers="id1 id5 id6">11</td>
      <td headers="id2 id5 id6">20</td>
      <td headers="id3 id5 id6">25</td>
      <td headers="id4 id5 id6">23</td>
    </tr>
    <tr>
      <th id="id7">2 chambres</th>
      <td headers="id1 id5 id7">-</td>
      <td headers="id2 id5 id7">43</td>
      <td headers="id3 id5 id7">52</td>
      <td headers="id4 id5 id7">32</td>
    </tr>
    <tr>
      <th id="id8">3 chambres</th>
      <td headers="id1 id5 id8">-</td>
      <td headers="id2 id5 id8">13</td>
      <td headers="id3 id5 id8">15</td>
      <td headers="id4 id5 id8">40</td>
    </tr>
    <tr>
      <th id="id9" colspan="5">Rome</th>
    </tr>
    <tr>
      <th id="id10">1 chambre</th>
      <td headers="id1 id9 id10">13</td>
      <td headers="id2 id9 id10">21</td>
      <td headers="id3 id9 id10">22</td>
      <td headers="id4 id9 id10">3</td>
    </tr>
    <tr>
      <th id="id11">2 chambres</th>
      <td headers="id1 id9 id11">-</td>
      <td headers="id2 id9 id11">23</td>
      <td headers="id3 id9 id11">43</td>
      <td headers="id4 id9 id11">30</td>
    </tr>
    <tr>
      <th id="id12">3 chambres</th>
      <td headers="id1 id9 id12">-</td>
      <td headers="id2 id9 id12">16</td>
      <td headers="id3 id9 id12">32</td>
      <td headers="id4 id9 id12">40</td>
    </tr>
  </tbody>
</table>

Quels sont les impacts des tableaux de données complexes pour les personnes handicapées ?

Pour rappel, les tableaux de données peuvent être compliqués à utiliser par les personnes aveugles ou très malvoyantes.

Les tableaux de données complexes peuvent aussi poser des problèmes aux personnes présentant un handicap mental ou cognitif, comme la dyspraxie visuo-spatiale ^[1], en raison de leur organisation particulière et de la densité d’information.

Comment intégrer un tableau de données complexes de manière accessible ?

Pour rendre accessible un tableau de données complexes, il faut s’assurer que les cellules de données soient bien reliées aux en-têtes correspondants et qu’un résumé explique la structure du tableau.

Liaisons entre les en-têtes et les cellules

Comme les tableaux contiennent des cellules d’en-tête fusionnées et/ou des sous-contextes, les liaisons implicites <th><td> sont insuffisantes. Les liaisons scope="col" ou scope="row" le sont également. En effet, les attributs scope servent à identifier les cellules d’en-tête de colonne ou de ligne uniques.

Or, maintenant qu’il y a plusieurs en-têtes de colonne ou de ligne par cellule de données, ils doivent tous être restitués.

Pour cela, on se sert d’attributs headers sur les cellules de données qui permettent de référencer autant de cellules d’en-têtes que nécessaire.

1. Définir un attribut id à chaque en-tête <th>.
2. Pour chaque cellule de données, lui définir un attribut headers dont la valeur reprend les attributs id des en-têtes concernés. Les attributs headers acceptent plusieurs valeurs, séparées par des espaces. Par exemple <th id="id1"> et <td headers="id1 id2"> (critère 5.6 [A] — RGAA et critère 5.7 [A] — RGAA).

Résumé du tableau complexe

Le résumé donne le titre du tableau et explique sa structure, c’est-à-dire la manière dont sont répartis les en-têtes ou les données.

• Pour un tableau de données complexe HTML natif, le résumé doit se trouver dans une balise <caption> (critère 5.1 [A] — RGAA et critère 5.2 [A] — RGAA) ;
• Pour un tableau role="table", le résumé doit être lié au tableau par un attribut aria-describedby dont la valeur correspond à l’attribut id de l’élément du résumé.

Si le contenu de votre élément <caption> est long, sachez qu’il peut contenir entre autres des titres et des paragraphes. Vérifiez régulièrement la validité de votre code HTML.

Il est préférable que le résumé soit toujours visible ou que l’on puisse l’afficher, par exemple au moyen d’un bouton ou d’un élément <details>.

Autres solutions pour l’accessibilité d’un tableau complexe

• Scinder le tableau complexe en plusieurs tableaux de données simples (ceux-ci devront bien sûr être accessibles, cf. Comment intégrer des tableaux accessibles en HTML ?).
• Ou bien fournir une alternative au tableau complexe dans un format accessible non tabulaire, et ajouter une ancre vers cette alternative avant le tableau (et surtout pas après le tableau : elle risquerait d’être difficilement trouvée, voire de n’être jamais consultée). Cette alternative doit contenir le même contenu que le tableau et être structurée à l’aide de titres, de paragraphes et/ou de listes.

Ressources sur les tableaux de données complexes et l’accessibilité

• Techniques for describing tables
• Tables with Multi-Level Headers
• Caption & Summary

Envie de relire la série dans l’ordre ? Direction le premier article : Comment intégrer des tableaux HTML accessibles et conformes au RGAA ?