Accessibilité : [5.2.1.1] : Il faut regrouper les niveaux logiques des en-têtes de tableau (en-têtes de colonne)

Priorité 1

Cause :

Vous utilisez un tableau qui contient plusieurs niveaux d'en-tête de ligne ou de colonne. Il faut utiliser le balisage approprié pour associer les cellules de données avec leur en-tête.

Exemple :

Error <table summary="Ce tableau devrait utilisez le balisage pour regrouper les niveaux logiques des en-têtes de tableau.">
<caption>Ce tableau devrait utilisez le balisage pour regrouper les niveaux logiques des en-têtes de tableau.</caption>
<tr>
<th>ID</th><th colspan="2">Système<br/>Couleur ou Nom</th><th>Obligatoire</th>
</tr>
<tr>
<td>a-1</td><td>bleu</td><td></td><td>oui</td>
</tr>
<tr>
<td>a-2</td><td></td><td>Suzanne</td><td>oui</td>
</tr>
<tr>
<td>a-3</td><td>vert</td><td></td><td>non</td>
</tr>
</table>

Solution :

Pour des tableaux de données qui ont deux ou plusieurs niveaux logiques d'en-têtes de lignes et de colonnes, il faut utiliser des balises pour associer les cellules de données avec les cellules d'en-têtes.
Par exemple, il faut utiliser <thead>, <tfoot> et <tbody> pour regrouper les lignes, <col> et <colgroup> pour regrouper les colonnes, et les attributs "axis", "scope" et "headers" pour décrire des relations plus complexes entre les données.

Références :

.