En-têtes de tableau

Silktide vérifie que les tableaux présentant des données définissent des cellules d’en-tête. Les en-têtes indiquent aux personnes utilisant ce que signifie chaque ligne et chaque colonne, quelque chose que les lecteurs voyants déduisent de la mise en page du tableau.

Prenez un tableau des noms de famille et des villes. Sans ligne d’en-tête, une valeur comme "Washington" pourrait être l’un ou l’autre — le sens ne devient clair que lorsque les colonnes sont intitulées.

<!-- Problème : les en-têtes sont des cellules ordinaires, elles n’ont donc aucune signification -->
<table>
  <tr>
    <td>Nom de famille</td>
    <td>Ville</td>
  </tr>
  <tr>
    <td>Washington</td>
    <td>London</td>
  </tr>
</table>

Pourquoi c’est important

Un parcourt un tableau cellule par cellule. Lorsque des en-têtes sont définis, il peut annoncer l’en-tête pertinent avec chaque valeur, ainsi "London" est lu "Ville : London". Sans en-têtes, l’utilisateur n’entend qu’un flot de valeurs et doit mémoriser la mise en page du tableau pour leur donner du sens — et pour des tableaux plus grands, c’est pratiquement impossible.

Rendre la ligne du haut en gras ou d’une autre couleur ne suffit pas. Le style visuel n’a aucune signification pour les technologies d’assistance ; seul le sous-jacent en a une.

Comment corriger

Remplacez chaque cellule d’en-tête de <td> par <th> et ajoutez un attribut scope indiquant si elle concerne une colonne ou une ligne :

<!-- Correctif : les en-têtes sont de véritables cellules d’en-tête -->
<table>
  <tr>
    <th scope="col">Nom de famille</th>
    <th scope="col">Ville</th>
  </tr>
  <tr>
    <td>Washington</td>
    <td>London</td>
  </tr>
</table>

Si le tableau ne présente pas de données et sert uniquement à organiser visuellement la page, ajoutez role="presentation" à l’élément <table> pour que les technologies d’assistance ignorent sa structure. Mieux encore, remplacez les tableaux de mise en page par du CSS — ils sont fortement déconseillés dans la conception web moderne.

Comment Silktide teste cela

Rechercher tous les tableaux sur chaque page.
Ignorer les tableaux marqués comme de présentation avec role="presentation".
Ignorer les tableaux avec une seule ligne ou une seule colonne, qui sont peu susceptibles d’être des tableaux de données.
Signaler chaque tableau restant qui ne contient aucune cellule d’en-tête <th>.

Dépannage

Mon tableau a des en-têtes, mais ce sont des cellules `<td>` stylées

Des cellules qui ne font que ressembler à des en-têtes ne comptent pas. Les technologies d’assistance ne voient ni les polices ni les couleurs ; convertissez les cellules en <th>.

Mon tableau de mise en page est signalé

Silktide n’ignore que les tableaux de mise en page qui déclarent role="presentation". Si un tableau est réellement de présentation, ajoutez cet attribut — ou remplacez le tableau par une mise en page en CSS.