Tableaux

Les cellules de données ont besoin d’en-têtes

Règle: td-has-header
Gravité: Critique
Niveau WCAG A

Pourquoi c’est important

Dans un tableau de plus de trois sur trois, une cellule lue isolément est un nombre sans signification. Ce sont les en-têtes qui permettent d’annoncer « Chiffre d’affaires, Berlin, 1,2 M » quand le focus arrive sur la cellule.

Comment corriger

Donnez au tableau une ligne ou une colonne d’en-tête avec <th>.
Ajoutez scope="col" ou scope="row" pour lever l’ambiguïté de direction.
Pour les tableaux irréguliers, reliez explicitement les cellules avec headers et id.

Dans le balisage

Échoue

<table>
  <tr><td>Berlin</td><td>1.2M</td></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 td-has-header (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.