En-tête de colonne ou de ligne

Dans un tableau de données, un en-tête de colonne ou de ligne est la cellule qui sert d'intitulé aux autres cellules de cette colonne ou de cette ligne. En HTML, c'est la balise <th> qui remplit ce rôle. Sans elle, un lecteur d'écran restitue les cellules sans contexte : l'utilisateur entend des valeurs sans savoir à quoi elles correspondent.

Quand vous parcourez un tableau des yeux, vous faites des allers-retours entre les cellules et leurs en-têtes sans y penser. Un lecteur d'écran fait pareil, à condition que le code lui indique quelles cellules sont des en-têtes. Sans cette information, il lit des chiffres bruts, sans contexte. « 120 €. » 120 € de quoi ?

#<th> et l'attribut scope

La balise <th> marque une cellule comme en-tête. L'attribut scope précise sa portée : col pour une colonne, row pour une ligne.

<table>
  <caption>Ventes 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>
    <tr>
      <th scope="row">Sud</th>
      <td>98 €</td>
      <td>110 €</td>
    </tr>
  </tbody>
</table>

Avec ce balisage, un lecteur d'écran annonce « Nord, T1 : 120 € » quand l'utilisateur navigue dans la cellule. Sans les <th>, il annonce « 120 € ». Rien d'autre.

Pour les tableaux simples où l'en-tête est en première ligne ou première colonne, <th> seul suffit. L'ajout de scope lève l'ambiguïté quand le tableau a des en-têtes dans les deux dimensions, ce qui est la recommandation du W3C.

#Le piège du <td> déguisé

L'erreur la plus courante : mettre le texte d'en-tête dans un <td> et le styler en gras avec du CSS. Visuellement, le résultat est identique. Pour un lecteur d'écran, la cellule reste une cellule de données ordinaire. L'association avec les autres cellules n'existe pas.

<!-- ❌ Ressemble à un en-tête, mais n'en est pas un -->
<td><strong>Région</strong></td>
 
<!-- ✅ En-tête reconnu par les technologies d'assistance -->
<th scope="col">Région</th>

Autre piège : placer l'attribut scope sur un <td>. L'attribut est réservé à <th>. Sur un <td>, il n'a aucun effet.

#Tableaux complexes : quand scope ne suffit plus

Quand un tableau contient des cellules fusionnées ou des sous-contextes, scope atteint ses limites. Il faut alors associer chaque cellule de données à ses en-têtes via les attributs id et headers, comme le détaille Access42. Le RGAA y consacre plusieurs critères dans sa thématique 5.

La meilleure stratégie reste de simplifier : scinder un tableau complexe en plusieurs tableaux simples. Les utilisateurs de lecteurs d'écran s'y retrouveront mieux. Tous les autres aussi.

#En résumé

Un en-tête de tableau, c'est une balise <th>, pas un <td> en gras. Ajoutez scope="col" ou scope="row" dès que le tableau a des en-têtes dans les deux directions. Et si votre tableau nécessite id/headers, demandez-vous s'il ne serait pas plus clair en deux tableaux.