RGAA 5.1 — Chaque tableau de données complexe a-t-il un résumé ?

Tableaux de données sans en-têtes

Le problème

L'absence d'en-têtes dans les tableaux de données signifie que les cellules d'en-tête (<th>) ne sont pas utilisées ou ne sont pas correctement associées aux cellules de données (<td>). Le critère RGAA 5.7 (correspondant au WCAG 1.3.1, niveau A) exige que chaque en-tête de tableau de données soit correctement balisé avec un élément <th> et, pour les tableaux complexes, que l'attribut headers ou scope soit utilisé pour associer les en-têtes aux données.

Sans en-têtes balisés, un lecteur d'écran lit les données d'un tableau cellule par cellule sans contexte. L'utilisateur entend « 42 » sans savoir si c'est un prix, une quantité, un âge ou un numéro de page. Les en-têtes fournissent ce contexte en étant annoncés automatiquement par le lecteur d'écran quand l'utilisateur navigue dans le tableau.

Ce problème est courant sur les sites e-commerce (tableaux de comparaison de produits), les sites financiers (tableaux de tarifs, rapports), les sites administratifs (tableaux de données publiques) et les dashboards. Les développeurs utilisent souvent des <div> stylisés en grille au lieu de vrais tableaux HTML, ou construisent des tableaux sans <th>.

Impact sur les utilisateurs

Pour les utilisateurs de lecteurs d'écran, un tableau de données sans en-têtes est pratiquement incompréhensible. Dans un tableau de 5 colonnes et 20 lignes, l'utilisateur entend une série de valeurs sans savoir à quoi elles correspondent. Naviguer dans le tableau devient un exercice de mémoire : l'utilisateur doit compter les colonnes pour deviner la signification de chaque cellule.

Avec des en-têtes correctement balisés, le lecteur d'écran annonce automatiquement l'en-tête de colonne et/ou de ligne lorsque l'utilisateur se déplace dans le tableau. Au lieu d'entendre « 42 », il entend « Prix : 42 euros ». La différence d'expérience est considérable.

Les tableaux complexes (en-têtes fusionnés, en-têtes de ligne et de colonne, tableaux imbriqués) nécessitent un balisage plus détaillé avec les attributs scope ou headers pour maintenir l'association entre en-têtes et données.

Votre site a-t-il ce problème ?

106 critères RGAA analysés en 5 minutes par notre IA.

Testez votre site gratuitement

Exemple de code

Avant (non conforme)

<!-- Tableau sans en-têtes -->
<table>
  <tr>
    <td>Produit</td>
    <td>Prix</td>
    <td>Stock</td>
  </tr>
  <tr>
    <td>Widget A</td>
    <td>42 €</td>
    <td>150</td>
  </tr>
</table>

<!-- "Tableau" en div sans sémantique -->
<div class="grid">
  <div class="header">Nom</div>
  <div class="header">Email</div>
  <div class="cell">Marie</div>
  <div class="cell">marie@ex.fr</div>
</div>

Après (conforme)

<!-- Tableau avec en-têtes corrects -->
<table>
  <caption>Liste des produits et tarifs</caption>
  <thead>
    <tr>
      <th scope="col">Produit</th>
      <th scope="col">Prix</th>
      <th scope="col">Stock</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Widget A</th>
      <td>42 €</td>
      <td>150</td>
    </tr>
  </tbody>
</table>

<!-- Vrai tableau HTML au lieu de divs -->
<table>
  <thead>
    <tr>
      <th scope="col">Nom</th>
      <th scope="col">Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Marie</td>
      <td>marie@ex.fr</td>
    </tr>
  </tbody>
</table>

Comment Scrutia détecte ce problème

Scrutia détecte tous les tableaux de données sur vos pages et vérifie la présence d'éléments <th> avec l'attribut scope approprié. Il signale les tableaux qui utilisent uniquement des <td> pour les en-têtes, les tableaux complexes sans attribut headers, et les grilles de données construites avec des <div> au lieu de tableaux HTML sémantiques. Le rapport propose le balisage correct pour chaque tableau.

Questions fréquentes

Quelle est la différence entre un tableau de données et un tableau de mise en page ?

Un tableau de données présente des informations structurées en lignes et colonnes (prix, horaires, statistiques). Un tableau de mise en page utilise la structure tabulaire uniquement pour le positionnement visuel. Les tableaux de mise en page doivent utiliser role="presentation" et ne nécessitent pas d'en-têtes. En pratique, les tableaux de mise en page sont déconseillés au profit de CSS.

Quand utiliser scope vs headers ?

Utilisez scope="col" ou scope="row" sur les <th> pour les tableaux simples (en-têtes en première ligne et/ou première colonne). Utilisez l'attribut headers pour les tableaux complexes avec des cellules d'en-tête fusionnées ou des relations non linéaires entre en-têtes et données.

Faut-il une légende (caption) sur chaque tableau ?

Le RGAA recommande fortement un élément <caption> qui décrit la nature des données du tableau. C'est obligatoire pour les tableaux complexes (critère 5.1). Pour les tableaux simples, c'est une bonne pratique qui aide tous les utilisateurs à comprendre le contexte.

Comment rendre un tableau responsive et accessible ?

Utilisez un conteneur avec overflow-x: auto pour permettre le défilement horizontal sur mobile. Ne supprimez pas les en-têtes dans la version mobile. Les approches comme empiler les lignes en cartes sont acceptables si les en-têtes de colonne sont reproduits comme étiquettes dans chaque carte.

Votre site a-t-il ce problème ?

Scrutia audite votre site sur 106 critères RGAA en 5 minutes. Navigation clavier, composants ARIA, focus visible, contrastes, et bien plus.

Lancer un audit gratuit