Tableaux

Les en-têtes ont besoin de cellules à décrire

Règle: th-has-data-cells
Gravité: Sérieux
Niveau WCAG A

Pourquoi c’est important

Un <th> sans cellules de données en dessous signale d’ordinaire un tableau utilisé pour la mise en page, ou une ligne d’en-tête décalée par rapport au corps. Dans les deux cas, la structure annoncée ne correspond pas à l’écran.

Comment corriger

Vérifiez que chaque en-tête a bien des cellules dans sa colonne ou sa ligne.
Utilisez <td> pour les cellules qui ne sont pas des en-têtes.
Si le tableau ne sert qu’à la mise en page, remplacez-le par CSS Grid ou Flexbox.

Dans le balisage

Échoue

<table>
  <tr><th>Region</th><th>Revenue</th></tr>
</table>

Réussit

<table>
  <tr><th scope="col">Region</th><th scope="col">Revenue</th></tr>
  <tr><td>Berlin</td><td>1.2M</td></tr>
</table>

L’exigence sous-jacente

Cette règle est une manière d’échouer aux critères de succès WCAG 2.2 suivants. Le W3C, qui rédige la norme, explique chacun d’eux :

1.3.1 Information et relations (s’ouvre dans un nouvel onglet) — Niveau WCAG A

Pour aller plus loin

Deque University sur th-has-data-cells (s’ouvre dans un nouvel onglet)

Deque développe axe-core, le moteur open source utilisé par notre scanner. Sa page documente la règle telle que le moteur l’implémente.

Les contrôles automatiques trouvent les défaillances qu’un navigateur peut prouver. Ils ne peuvent pas juger si un sous-titrage est fidèle, si une alternative textuelle est utile, ni si une page s’utilise de bout en bout au clavier : cela demande une personne.