Identifiants des en-têtes de tableau

Silktide vérifie les tableaux qui relient leurs cellules à des en-têtes à l'aide de l'attribut headers. Dans ces tableaux, chaque cellule d'en-tête a besoin de son propre identifiant, sinon les liaisons ne peuvent pas fonctionner.

Dans les tableaux complexes - par exemple, ceux comportant deux niveaux d'en-têtes ou des cellules s'étendant sur plusieurs lignes - la relation entre une cellule et ses en-têtes ne peut pas être déduite de la position seule. HTML résout cela avec l'attribut headers : chaque cellule de données énumère les valeurs id des cellules d'en-tête qui s'appliquent à elle. Cela ne fonctionne que si chaque cellule d'en-tête possède effectivement un id.

<!-- Problème : le deuxième en-tête n'a pas d'id, donc les cellules ne peuvent pas s'y référer -->
<table>
  <tr>
    <th id="nom">Nom</th>
    <th>Score</th>
  </tr>
  <tr>
    <td headers="nom">Ada</td>
    <td>98</td>
  </tr>
</table>

Pourquoi c'est important

Lorsqu'un tableau utilise des associations headers, un lecteur d'écran lit les en-têtes liés à voix haute avant chaque valeur, ce qui permet à l'auditeur de savoir où il se trouve dans un tableau complexe. Une cellule d'en-tête sans id ne peut pas être référencée, donc les cellules en dessous sont annoncées sans contexte et le tableau devient une devinette pour quiconque ne peut pas le voir.

Comment corriger

1. Donnez à chaque cellule d'en-tête <th> du tableau un id unique.
2. Mettez à jour l'attribut headers de chaque cellule de données pour lister les identifiants de tous les en-têtes qui s'appliquent à cette cellule, séparés par des espaces :

<!-- Correction : chaque en-tête a un id et les cellules s'y réfèrent -->
<table>
  <tr>
    <th id="nom">Nom</th>
    <th id="score">Score</th>
  </tr>
  <tr>
    <td headers="nom">Ada</td>
    <td headers="score">98</td>
  </tr>
</table>

3. Sinon, envisagez de simplifier le tableau. Les tableaux simples avec une seule ligne ou une seule colonne d'en-têtes n'ont pas besoin d'associations headers - des cellules <th> avec des attributs scope suffisent et sont bien plus faciles à maintenir.

Comment Silktide teste ceci

1. Trouver chaque tableau sur chaque page.
2. Ignorer les tableaux où aucune cellule n'utilise un attribut headers - ce contrôle ne s'applique qu'aux tableaux qui ont opté pour des associations explicites d'en-têtes.
3. Dans les tableaux restants, signaler chaque cellule d'en-tête <th> qui n'a pas d'attribut id.

En savoir plus

• Comprendre le critère de succès 1.3.1 : Informations et relations (WCAG 2.2)
• Technique H43 : utiliser les attributs id et headers (WCAG)
• Tableaux avec en-têtes à plusieurs niveaux (tutoriel W3C)
• En-têtes de cellule