Tableaux

Utiliser une vraie légende de tableau

Règle: table-fake-caption
Gravité: Sérieux
Niveau WCAG A

Pourquoi c’est important

Une première ligne mise en forme comme un titre est lue comme une cellule de données. Le tableau se retrouve sans légende, et la ligne fausse la structure des colonnes pour qui lit cellule par cellule.

Comment corriger

Déplacez le texte dans un élément <caption>, premier enfant de la <table>.
Habillez la légende en CSS si elle doit ressembler à l’ancienne ligne.
Supprimez ensuite la ligne fusionnée pour que le nombre de colonnes soit exact.

Dans le balisage

Échoue

<table>
  <tr><td colspan="3"><strong>Q3 revenue</strong></td></tr>
  <tr><th>Region</th><th>Q3</th><th>Q4</th></tr>
</table>

Réussit

<table>
  <caption>Q3 revenue</caption>
  <tr><th>Region</th><th>Q3</th><th>Q4</th></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 table-fake-caption (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.