Critère 5.6
En-têtes de tableau
Les en-têtes de lignes et de colonnes doivent être correctement balisés.
En Bref : L'essentiel à retenir
- L'objectif est de permettre aux lecteurs d'écran d'associer chaque cellule de données à son en-tête.
- Utilisez la balise `<th>` pour les cellules d'en-tête afin d'améliorer l'accessibilité.
- Les en-têtes de colonne doivent utiliser l'attribut `scope="col"` pour une meilleure association.
- Les en-têtes de ligne sont recommandés et peuvent utiliser l'attribut `scope="row"`.
Objectif
Permettre aux lecteurs d'écran d'associer chaque cellule de données à son en-tête (savoir que "12€" correspond à "Prix").
Solution Technique
Utilisez la balise <th> (Table Header) pour les cellules d'en-tête, au lieu de <td>.
<table>
<caption>Prix des fruits</caption>
<thead>
<tr>
<!-- ✅ En-têtes de colonne -->
<th scope="col">Fruit</th>
<th scope="col">Prix</th>
</tr>
</thead>
<tbody>
<tr>
<!-- ✅ En-tête de ligne (optionnel mais recommandé) -->
<th scope="row">Pomme</th>
<td>2€/kg</td>
</tr>
<tr>
<th scope="row">Banane</th>
<td>1.5€/kg</td>
</tr>
</tbody>
</table>