Tableau de données

Un tableau de données est un élément HTML qui organise des informations en lignes et en colonnes, où chaque cellule entretient une relation logique avec ses en-têtes. Contrairement à un tableau de mise en forme (utilisé pour disposer des éléments visuellement), un tableau de données exige un balisage sémantique (balises <th>, attribut scope, élément <caption>) pour que les lecteurs d'écran restituent le contexte de chaque valeur.

Un lecteur d'écran parcourt un tableau cellule par cellule, ligne par ligne. Quand il tombe sur « 120 € », il ne peut pas regarder en haut de la colonne pour comprendre ce que ce montant représente. Il a besoin que le code HTML lui dise : « cette cellule appartient à la colonne T1 et à la ligne Nord ». C'est toute la différence entre un tableau de données et une grille de cellules muettes.

#Données ou mise en forme : la distinction qui change tout

Le RGAA consacre sa thématique 5 aux tableaux et distingue deux catégories.

Un tableau de données contient des informations structurées en deux dimensions (colonnes et lignes) où les relations entre les cellules ont un sens. Un tableau de tarifs, un emploi du temps : ce sont des tableaux de données.

Un tableau de mise en forme utilise <table> uniquement pour disposer des éléments sur la page. Aucune relation logique entre lignes et colonnes. Le W3C/WAI recommande de lui attribuer role="presentation" pour que les technologies d'assistance l'ignorent.

Confondre les deux est l'erreur la plus répandue. Un tableau de mise en forme avec des <th> force le lecteur d'écran à annoncer des en-têtes fictifs. Un tableau de données sans <th> prive l'utilisateur de tout contexte.

#Le balisage minimum

Un tableau de données accessible repose sur trois éléments :

<table>
  <caption>Ventes trimestrielles par région</caption>
  <thead>
    <tr>
      <th scope="col">Région</th>
      <th scope="col">T1</th>
      <th scope="col">T2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Nord</th>
      <td>120 €</td>
      <td>145 €</td>
    </tr>
  </tbody>
</table>

<caption> identifie le tableau. <th> déclare les en-têtes. scope précise la direction (colonne ou ligne). Sans ces trois éléments, le lecteur d'écran restitue des valeurs orphelines.

#Le piège du tableau « visuellement correct »

Beaucoup de développeurs mettent leurs en-têtes dans des <td> stylés en gras. Le rendu visuel est identique. Pour un lecteur d'écran, ces cellules restent des cellules de données ordinaires. Aucune association n'est créée avec les valeurs en dessous. Ce que MDN documente clairement : c'est la sémantique HTML, pas le style CSS, qui détermine le comportement des technologies d'assistance.

#En résumé

Un tableau de données a des en-têtes (<th> avec scope), un titre (<caption>) et aucun role="presentation". Si votre tableau n'a pas besoin d'en-têtes pour être compris, c'est probablement un tableau de mise en forme, et il n'a pas besoin d'être un <table>.