Tableau de données complexe

Un tableau de données complexe est un tableau HTML dont certains en-têtes ne couvrent pas toute leur ligne ou colonne, typiquement à cause de cellules fusionnées ou de sous-groupes d'en-têtes. L'attribut scope ne suffit plus : il faut associer chaque cellule à ses en-têtes via les attributs id et headers. Quand c'est possible, scinder le tableau en plusieurs tableaux simples reste la meilleure solution.

Un tableau de ventes par trimestre avec des en-têtes « Semestre 1 » et « Semestre 2 » fusionnés sur deux colonnes chacun. Visuellement, la structure est limpide. Pour un lecteur d'écran, c'est un champ de mines : il ne sait pas quel en-tête s'applique à quelle cellule.

#Quand un tableau devient-il « complexe » ?

Dès que les en-têtes ne se répartissent plus uniquement sur la première ligne et la première colonne. Cellules fusionnées avec colspan ou rowspan, en-têtes imbriqués sur plusieurs niveaux, sous-groupes thématiques au milieu du tableau : autant de cas où l'attribut scope ne peut plus exprimer les relations entre en-têtes et données.

Le RGAA y consacre plusieurs critères dans sa thématique 5. Le mécanisme prévu par les WCAG : poser un id sur chaque <th>, puis lister ces identifiants dans l'attribut headers de chaque <td>.

<table>
  <caption>Ventes trimestrielles par zone</caption>
  <thead>
    <tr>
      <th rowspan="2" id="zone">Zone</th>
      <th colspan="2" id="s1">Semestre 1</th>
      <th colspan="2" id="s2">Semestre 2</th>
    </tr>
    <tr>
      <th id="t1" headers="s1">T1</th>
      <th id="t2" headers="s1">T2</th>
      <th id="t3" headers="s2">T3</th>
      <th id="t4" headers="s2">T4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th id="nord" headers="zone">Nord</th>
      <td headers="nord s1 t1">120 €</td>
      <td headers="nord s1 t2">145 €</td>
      <td headers="nord s2 t3">98 €</td>
      <td headers="nord s2 t4">110 €</td>
    </tr>
  </tbody>
</table>

Chaque cellule « 120 € » est reliée à ses trois en-têtes : « Nord », « Semestre 1 », « T1 ». Le lecteur d'écran peut annoncer le contexte complet.

#Le piège : id/headers et le support réel

Le mécanisme est propre sur le papier. En pratique, le support par les lecteurs d'écran reste inégal. JAWS le gère correctement, NVDA s'en sort selon les versions, VoiceOver a longtemps ignoré headers. Et chaque cellule doit être indexée manuellement. Une seule erreur d'identifiant casse la chaîne pour toute la ligne.

C'est pourquoi Access42 recommande de toujours se poser la question avant de coder : ce tableau peut-il être scindé en deux ou trois tableaux simples avec scope ? La réponse est souvent oui.

Simplifier un tableau, ce n'est pas un aveu de faiblesse technique. C'est un choix qui profite à tous les utilisateurs, y compris ceux qui voient très bien mais qui peinent à lire des grilles à 15 colonnes sur un écran de téléphone.

#En résumé

Un tableau est « complexe » quand scope ne suffit plus à relier en-têtes et données. Le mécanisme id/headers existe pour ces cas, mais sa maintenance est lourde et son support inégal. La meilleure approche : scinder en tableaux simples chaque fois que le contenu le permet.