Critère 5.7
Association des cellules
Les cellules de données doivent être associées à leurs en-têtes.
En Bref : L'essentiel à retenir
- Clarifier la relation entre en-têtes et cellules est essentiel pour les tableaux simples mais ambigus.
- Utilisez l'attribut `scope` sur les balises `<th>` pour indiquer si l'en-tête s'applique à une colonne ou une ligne.
- Dans 95% des cas, l'attribut `scope` est suffisant pour clarifier les relations dans les tableaux.
- Pour les tableaux très complexes, utilisez les attributs `id` et `headers` en complément.
Objectif
Clarifier la relation entre en-têtes et cellules, surtout si le tableau est simple mais ambigu.
Solution Technique
Utilisez l'attribut scope sur les balises <th>.
scope="col": L'en-tête s'applique à toute la colonne.scope="row": L'en-tête s'applique à toute la ligne.
<tr>
<th scope="col">Nom</th>
<th scope="col">Âge</th>
</tr>
<tr>
<th scope="row">Alice</th>
<td>25 ans</td>
</tr>
Pour les tableaux très complexes, il faut utiliser les attributs id et headers, mais scope suffit dans 95% des cas.