Identifiants d'en-têtes de tableau

Silktide vérifie les tableaux qui relient leurs cellules à des en-têtes au moyen de l'attribut headers. Dans ces tableaux, chaque cellule d'en-tête a besoin de son propre ID, sinon les liens 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éterminée à partir de la position uniquement. 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="name">Nom</th>
    <th>Pointage</th>
  </tr>
  <tr>
    <td headers="name">Ada</td>
    <td>98</td>
  </tr>
</table>

Pourquoi c'est important

Quand un tableau utilise des associations headers, un lecteur d'écran lit à voix haute les en-têtes liés 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 toute personne qui ne peut pas le voir.

Comment corriger

1. Attribuez à 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 ID de tous les en-têtes qui s'appliquent à elle, séparés par des espaces :

<!-- Corrigé : chaque en-tête a un id et les cellules s'y réfèrent -->
<table>
  <tr>
    <th id="name">Nom</th>
    <th id="score">Pointage</th>
  </tr>
  <tr>
    <td headers="name">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 du tout - des <th> avec des attributs scope suffisent, et elles sont beaucoup plus faciles à maintenir.

Comment Silktide teste ceci

1. Repérer tous les tableaux sur chaque page.
2. Ignorer les tableaux où aucune cellule n'utilise l'attribut headers - cette vérification ne s'applique qu'aux tableaux qui ont opté pour des associations d'en-têtes explicites.
3. Dans les tableaux restants, signaler chaque cellule d'en-tête <th> qui n'a pas d'attribut id.

Pour 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