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 des la signification de chaque ligne et de chaque colonne — ce que les lecteurs voyants déduisent de la disposition du tableau.

Prenons un tableau de noms de famille et de villes. Sans une ligne d’en-tête, une valeur comme « Washington » pourrait correspondre à 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, donc elles n’ont 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, de sorte que « London » est lu comme « Ville : London ». Sans en-têtes, la personne entend uniquement une suite de valeurs et doit mémoriser la disposition du tableau pour leur donner un sens — et pour les grands tableaux, c’est pratiquement impossible.

Rendre la ligne du haut en gras ou d’une couleur différente ne suffit pas. La mise en forme visuelle n’a aucune signification pour les technologies d’assistance; seul le sous-jacent en a.

Comment corriger

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

<!-- Corrigé : les en-têtes sont de vraies 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 aucune donnée et sert seulement à organiser visuellement la page, ajoutez role=\"presentation\" à l’élément <table> afin 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

Repérer tous les tableaux de 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>` stylisées

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

Mon tableau de mise en page est signalé

Silktide ignore seulement 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 CSS.