Générateur de tableau HTML accessible

<table>
  <caption>Prêts de la médiathèque par trimestre, 2026</caption>
  <thead>
    <tr>
      <th scope="col">Site</th>
      <th scope="col">T1</th>
      <th scope="col">T2</th>
      <th scope="col">T3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Centre</th>
      <td>4 210</td>
      <td>3 980</td>
      <td>3 150</td>
    </tr>
    <tr>
      <th scope="row">Rive gauche</th>
      <td>1 870</td>
      <td>1 920</td>
      <td>1 640</td>
    </tr>
    <tr>
      <th scope="row">Bibliobus</th>
      <td>620</td>
      <td>710</td>
      <td>540</td>
    </tr>
  </tbody>
</table>

Les balises d’un tableau HTML

<table> contient tout le tableau. Son titre va dans une balise caption, que la spécification HTML place en premier enfant du tableau, avant toute ligne. Les lignes d’en-têtes de colonne se regroupent dans thead, les lignes de données dans tbody. Chaque ligne est un tr ; dans une ligne, th marque une cellule d’en-tête et td une cellule de données. Les attributs colspan et rowspan étendent une cellule sur plusieurs colonnes ou plusieurs lignes.

Ce que demande le RGAA

Le critère 5.6 du RGAA 4.1.2 demande que chaque en-tête de colonne et chaque en-tête de ligne d’un tableau de données soit un <th>, ou une balise avec le rôle ARIA columnheader ou rowheader. Le glossaire recommande th, seule balise prise en charge par toutes les technologies d’assistance.

Le critère 5.7 porte sur le lien entre chaque cellule et ses en-têtes. Un th qui vaut pour toute sa colonne ou toute sa ligne porte un attribut scope, un id unique ou un rôle ARIA (test 5.7.1). Avec scope, la valeur est col pour un en-tête de colonne et row pour un en-tête de ligne (test 5.7.2). Le critère admet un th sans scope quand les en-têtes tiennent sur une seule ligne ou une seule colonne.

Le titre n’est pas imposé à un tableau simple. S’il existe, il doit être associé au tableau ( critère 5.4) et identifier son contenu de façon claire et concise (critère 5.5). Le glossaire admet aussi les attributs title, aria-label et aria-labelledby, mais recommande caption, seul bien restitué par toutes les technologies d’assistance.

Tableau simple ou tableau complexe

Le RGAA appelle tableau de données complexe un tableau dont les en-têtes ne sont pas tous sur la première ligne ou la première colonne, ou dont un en-tête ne vaut pas pour toute sa ligne ou toute sa colonne. Des colonnes groupées par année, puis par semestre, en sont l’exemple courant. Il demande deux choses de plus.

• Un résumé qui explique sa nature et sa structure ( critère 5.1). En HTML5, le glossaire ne retient qu’une technique : le placer dans le caption, quitte à le masquer visuellement en CSS. L’outil l’ajoute sous le titre, dans un paragraphe.
• Des en-têtes reliés un à un aux cellules. Chaque th reçoit un id unique et pas de scope (test 5.7.3), et chaque cellule liste dans son attribut headers les id de tous ses en-têtes (test 5.7.4), par exemple headers="prets-2025 prets-2025-s1 prets-centre". La technique H63 des WCAG renvoie elle aussi vers id et headers pour les tableaux complexes.

Le RGAA précise que headers l’emporte sur scope quand une cellule porte les deux : les en-têtes reliés par scope sont alors ignorés. L’outil n’écrit donc jamais les deux dans un même tableau.

Comment l’outil lit votre collage

Il reconnaît la tabulation d’un tableur, le point-virgule d’un CSV à la française et la barre verticale d’un tableau Markdown. La virgule n’est jamais prise pour un séparateur : elle sert aux décimales. Une cellule entre guillemets reste entière, même si elle contient un point-virgule ou un retour à la ligne.

Avec l’option « Deux premières lignes », les cases vides de la première ligne indiquent les fusions, comme les donne la copie de cellules fusionnées. Un en-tête suivi de cases vides couvre les colonnes qui ont un sous-en-tête en deuxième ligne (colspan). Un en-tête sans rien en dessous couvre les deux lignes (rowspan), comme « Site » dans l’exemple.

Les tableaux de mise en forme

Un tableau qui ne sert qu’à placer des éléments à l’écran n’a pas d’en-têtes. Le critère 5.3 lui demande l’attribut role="presentation" et un contenu qui reste compréhensible lu cellule après cellule. Le critère 5.8 lui interdit caption, th, thead et tfoot, et sur ses cellules les attributs scope, headers et axis. Cet outil ne produit que des tableaux de données : pour une mise en page, une grille CSS évite ces contraintes.

Ce que l’outil ne vérifie pas

• La pertinence du titre et du résumé (critères 5.2 et 5.5) : relisez-les en vous demandant s’ils suffisent à savoir ce que contient le tableau sans le parcourir.
• Le rôle de chaque cellule : seule une personne sait si la première colonne contient des intitulés ou des données.
• Les en-têtes de ligne sur plusieurs colonnes, ou les en-têtes intermédiaires au milieu du tableau : complétez alors les id et headers à la main.
• Le rendu dans votre site : les couleurs de vos styles relèvent du critère 3.2 du RGAA, que l’outil de contraste vérifie.

Sources

RGAA 4.1.2, critère 5.1 (résumé des tableaux de données complexes) ; RGAA 4.1.2, critère 5.4 (titre associé au tableau de données) ; RGAA 4.1.2, critère 5.6 (déclaration des en-têtes) ; RGAA 4.1.2, critère 5.7 (association des cellules à leurs en-têtes) ; RGAA 4.1.2, critère 5.8 (tableaux de mise en forme) ; RGAA 4.1.2, glossaire : Tableau de données complexe ; RGAA 4.1.2, glossaire : Résumé (de tableau) ; RGAA 4.1.2, glossaire : Tableau de données ayant un titre ; HTML Living Standard, élément caption, en anglais ; HTML Living Standard, attributs scope et headers, en anglais ; WCAG 2.1, technique H63 : l’attribut scope, en anglais ; WCAG 2.1, technique H43 : les attributs id et headers, en anglais ; WCAG 2.1, échec F91 : en-têtes de tableau non balisés, en anglais .

Page mise à jour le 11 novembre 2026.