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

Priorité 1

Cause :

Vous avez défini des tableaux de données sans préciser les en-têtes de lignes et de colonnes.

Exemple :

Error <table summary="Cette table n'a pas d'en-tête de ligne/colonne">
<caption>Cette table n'a pas d'en-tête de ligne/colonne</caption>
<tr>
<td>age</td><td>taille</td><td>poids</td>
</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>
Good <table summary="Cette table a tous ses en-tête de ligne/colonne">
<caption>Cette table a tous ses en-tête de ligne/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.

Références :

.