Accessibilité : [5.1.2.3] : Il manque les en-tête des lignes/colonnes d'un tableau de données (1 ligne)

Priorité 1

Cause :

Vous avez défini des tableaux de données en omettant une en-tête de ligne.

Exemple :

Error <table summary="Il manque une en-tête de ligne dans ce tableau">
<caption>Il manque une en-tête de ligne dans ce tableau</caption>
<tr>
<th>age</th><td>10</td><td>15</td><td>20</td>
</tr>
<tr>
<td>taille</td><td>1.3 m</td><td>1.8 m</td><td>2.1 m</td>
</tr>
<tr>
<th>poids</th><td>50 kg</ td><td>75 kg.</td><td>100 kg.</td>
</tr>
</table>
Good <table summary="Cette table a tous ses en-tête de ligne">
<caption>Cette table a tous ses en-tête de ligne</caption>
<tr>
<th>age</th><td>10</td><td>15</td><td>20</td>
</tr>
<tr>
<th>taille</th><td>1.3 m</td><td>1.8 m</td><td>2.1 m</td>
</tr>
<tr>
<th>poids</th><td>50 kg</ td><td>75 kg.</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.

Références :

.