Tableau sans en-tête : critère RGAA 5.6 et balise th

Q: Faut-il toujours un scope sur les th ?

Oui, le RGAA recommande l'attribut scope sur chaque <th> pour lever toute ambiguïté. scope="col" pour une en-tête de colonne, scope="row" pour une en-tête de ligne. Sans scope , certains lecteurs d'écran devinent la portée, d'autres non.

C'est quoi

Un tableau de données (grille tarifaire, tableau comparatif, planning, résultats) a besoin d'en-têtes pour que son contenu soit compréhensible hors contexte visuel. La balise <th> (table header) identifie une cellule comme en-tête. Elle est accompagnée de l'attribut scope qui précise si l'en-tête s'applique à une colonne (scope="col") ou à une ligne (scope="row"). Sans <th>, le lecteur d'écran lit chaque cellule de données sans indiquer à quelle colonne ou ligne elle appartient. L'utilisateur doit retenir mentalement l'ordre des colonnes pour comprendre chaque valeur, ce qui est cognitif et souvent impossible dans les grands tableaux. Pour les tableaux complexes (en-têtes fusionnées, plusieurs niveaux d'en-têtes), les attributs id et headers permettent d'associer chaque cellule à plusieurs en-têtes.

Qui est touché

Les personnes aveugles ou malvoyantes : sans en-têtes, le lecteur d'écran lit "cellule : 79€" sans dire "Colonne : Plan Pro" ou "Ligne : Prix mensuel".
Les personnes utilisant un affichage braille ou une navigation tabulaire : elles naviguent cellule par cellule et ont besoin de l'association en-tête - valeur pour comprendre chaque donnée.

Impact business

Un tableau sans en-têtes est une suite de valeurs sans contexte. Pour l'utilisateur de lecteur d'écran, c'est comme lire une feuille de calcul sans les titres de colonnes.

L'erreur est particulièrement bloquante dans les tableaux de prix, de fonctionnalités ou de résultats, où chaque cellule n'a de sens que rapportée à sa colonne et sa ligne.

Sources des chiffres

Comment le détecter

Audit Mynto : le scan détecte les tableaux de données sans balise <th> et les <th> sans attribut scope.
Manuel : inspecte le code source d'un tableau. Si toutes les cellules sont des <td>, les en-têtes sont manquants. Vérifie aussi que les <th> présents ont bien un attribut scope pertinent.
Lecteur d'écran : navigue dans le tableau avec NVDA ou VoiceOver. Si le lecteur n'annonce pas "Colonne X" ou "Ligne Y" à chaque cellule, les en-têtes sont manquants ou mal déclarés.

Comment corriger

Avant - HTML

<!-- Tableau sans en-têtes : toutes les cellules sont des td -->
<table>
  <tr>
    <td>Plan</td>
    <td>Prix</td>
    <td>Sites</td>
  </tr>
  <tr>
    <td>Pro</td>
    <td>79 €/mois</td>
    <td>5</td>
  </tr>
</table>

Après - HTML

<!-- Tableau avec en-têtes de colonnes déclarés -->
<table>
  <thead>
    <tr>
      <th scope="col">Plan</th>
      <th scope="col">Prix</th>
      <th scope="col">Sites</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Pro</td>
      <td>79 €/mois</td>
      <td>5</td>
    </tr>
  </tbody>
</table>

Remplace les cellules d'en-tête <td> par des <th scope="col"> pour les en-têtes de colonnes, et <th scope="row"> pour les en-têtes de lignes.

Encadre les en-têtes dans <thead> et le corps du tableau dans <tbody>. Ce balisage n'est pas obligatoire mais améliore la clarté et le rendu dans certains lecteurs d'écran.

Sur WordPress, les blocs "Tableau" de Gutenberg proposent une option "En-tête fixe" dans la barre latérale qui génère automatiquement des <th> pour la première ligne. Active-la. Pour les tableaux dans l'éditeur classique (TinyMCE), utilise l'option "Propriétés de cellule" pour choisir le type "En-tête".

Questions fréquentes

Faut-il toujours un scope sur les th ?

Oui, le RGAA recommande l'attribut scope sur chaque <th> pour lever toute ambiguïté. scope="col" pour une en-tête de colonne, scope="row" pour une en-tête de ligne. Sans scope, certains lecteurs d'écran devinent la portée, d'autres non.

Comment gérer les tableaux avec des en-têtes fusionnées ?

Pour les en-têtes qui s'étendent sur plusieurs colonnes ou lignes (avec colspan ou rowspan), utilise des attributs id sur les <th> et des attributs headers sur les <td> pour expliciter l'association. Le scope seul ne suffit plus dans ce cas.

Un tableau de données peut-il aussi être un tableau de mise en forme ?

Non. Un tableau soit présente des données tabulaires (avec des en-têtes appropriés), soit est utilisé pour la mise en forme (sans en-têtes, sans sémantique de données). Il ne peut pas être les deux à la fois.

Cette erreur est-elle sur ton site ?

Lance un audit Mynto gratuit. Tu sauras en quelques minutes si ton site est concerné, sur quelles pages, et avec quel impact.

Tableau de données sans en-têtes de colonnes ou de lignes