Accessibilité : [5.1.2.2] : Il manque les en-tête des lignes/colonnes d'un tableau de données (1 colonne)
Priorité 1
Cause :
Vous avez défini des tableaux de données en omettant une en-tête de colonne.
Exemple :
|
<table summary="Il manque une en-tête de colonne dans ce tableau">
<caption>Il manque une en-tête de colonne dans ce tableau</caption>
<tr>
<td>age</td><th>taille</th><th>poids</th>
</tr>
<tr>
<td>10</td><td>1.3 m</td><td>50 kg.</td>
</tr>
<tr>
<td>15</td><td>1.8 m</td><td>75 kg.</td>
</tr>
<tr>
<td>20</td><td>2.1 m</td><td>100 kg.</td>
</tr>
</table>
|
|
<table summary="Cette table a tous ses en-tête de colonne">
<caption>Cette table a tous ses en-tête de colonne</caption>
<tr>
<th>age</th><th>taille</th><th>poids</th>
</tr>
<tr>
<td>10</td><td>1.3 m</td><td>50 kg.</td>
</tr>
<tr>
<td>15</td><td>1.8 m</td><td>75 kg.</td>
</tr>
<tr>
<td>20</td><td>2.1 m</td><td>100 kg.</td>
</tr>
</table>
|
Solution :
Pour les tableaux de données, il faut identifier les entêtes des lignes et des colonnes. Il faut par exemple utiliser <td> pour signaler les cellules de données et <th> pour signaler les en-têtes. On peut aussi nommer les éléments du tableau avec les attributs "scope", "headers", et "axis", de façon à ce que les futurs navigateurs et techniques d'assistance à l'accessibilité puissent sélectionner les données par filtrage sur les catégories.
- Il convient d'identifier les structures de groupes de lignes (<thead> pour les en-têtes répétés, <tfoot> pour les pieds de page, <tbody> pour les autres lignes) et de groupes de colonnes (<colgroup> et <col>).
- Il ne faut pas utiliser <pre> pour créer des mises en page tabulaires de texte ; il faut utiliser <table> pour que les techniques d'assistance puissent le reconnaître comme un tableau.
Références :
.