Dans les tableaux de données, les titres de colonnes et de lignes sont-ils correctement déclarés pour que les logiciels de lecture puissent les annoncer à chaque cellule ?
Critère officiel 5.6 — Pour chaque tableau de données, chaque en-tête de colonne et chaque en-tête de ligne sont-ils correctement déclarés ?
Pourquoi c'est important
Sans en-têtes correctement déclarés, le logiciel de lecture annonce les cellules d'un tableau sans contexte : « Lundi, 14h, Jean Martin, Mardi, 10h, Sophie Duval » — une suite de valeurs sans que l'utilisateur sache à quelle colonne ou quelle ligne elles appartiennent.
Exemples concrets
Ce qui est conforme
Le planning des permanences est créé avec le bloc Tableau WordPress, option « Ajouter une section d'en-tête » cochée. Le logiciel de lecture annonce : « Élu : Jean Martin — Jour : Lundi — Horaire : 14h-16h » pour chaque case.
Ce qui pose problème
Le même planning a été créé en collant un tableau depuis Excel. La mise en forme est identique visuellement, mais aucun en-tête n'est déclaré dans le code. Le logiciel de lecture lit les cases dans l'ordre sans jamais nommer les colonnes.
Comment agir
Pour les nouveaux tableaux, utilisez le bloc Tableau WordPress et cochez « Ajouter une section d'en-tête ». Pour les tableaux existants, posez la question à votre prestataire : « Mes tableaux ont-ils des en-têtes de colonnes correctement déclarés ? » — c'est la vérification la plus utile à demander. Ne collez jamais un tableau depuis Word ou Excel : il perd toute structure sémantique.
Règles clés
- Les en-têtes de colonnes doivent être des <th scope="col">.
- Les en-têtes de lignes doivent être des <th scope="row">.
- Un <th> sans scope est moins robuste — toujours ajouter scope pour une compatibilité maximale.
- Le <th> doit être dans le <thead> pour les en-têtes de colonnes, ou en première cellule du <tr> pour les en-têtes de lignes.
- Si un tableau est généré dynamiquement (JS, CMS), vérifier le HTML produit — pas seulement le template.
Erreurs fréquentes
- Première ligne du tableau en <td class="bold"> au lieu de <th>
- Première colonne en <td style="font-weight:bold"> pour simuler un en-tête de ligne
- Tableau généré depuis un copier-coller Excel : toutes les cellules sont des <td>
- <th> présents mais sans attribut scope — valides mais moins robustes selon les AT
- En-têtes présents uniquement dans la version desktop, supprimés en responsive
Exemples de code
en-têtes simulés avec td en gras
✗ Non conforme<table>
<tr>
<td><strong>Produit</strong></td>
<td><strong>Prix HT</strong></td>
<td><strong>Stock</strong></td>
</tr>
<tr>
<td>Logiciel A</td>
<td>490 €</td>
<td>Disponible</td>
</tr>
</table>Visuellement, la première ligne ressemble à des en-têtes. Pour un lecteur d'écran, ce sont des cellules de données ordinaires. Il annoncera 'Logiciel A' sans contexte de colonne.
en-têtes avec th et scope
✓ Conforme<table>
<caption>Catalogue des logiciels</caption>
<thead>
<tr>
<th scope="col">Produit</th>
<th scope="col">Prix HT</th>
<th scope="col">Stock</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Logiciel A</th>
<td>490 €</td>
<td>Disponible</td>
</tr>
</tbody>
</table>Les en-têtes de colonnes sont des <th scope="col"> dans <thead>. L'en-tête de ligne 'Logiciel A' est un <th scope="row">. Le lecteur d'écran annoncera pour '490 €' : 'Logiciel A — Prix HT — 490 €'.
tableau copié depuis Excel — erreur courante
✗ Non conforme<!-- Résultat d'un copier-coller depuis Excel
ou export HTML basique -->
<table>
<tbody>
<tr>
<td>Région</td>
<td>T1</td>
<td>T2</td>
</tr>
<tr>
<td>Nord</td>
<td>1 200</td>
<td>1 450</td>
</tr>
</tbody>
</table>Export ou copier-coller qui génère toutes les cellules en <td>, y compris les en-têtes. À corriger manuellement ou via le plugin d'export.
Référence WCAG : 1.3.1