td-has-header
Les cellules de données des grands tableaux doivent avoir un en-tête associé
Vérifie que chaque <td> d’un grand tableau simple (sans colspan/rowspan) a un en-tête associé, via un attribut headers, un <th> de colonne implicite au-dessus de lui ou un <th> de ligne implicite à sa gauche.
Applicabilité. Éléments <table> comptant au moins 4 lignes et au moins 4 colonnes (un « grand » tableau, où l’association implicite des en-têtes de ligne et de colonne est utile ; les petits tableaux se comprennent généralement d’eux-mêmes), et sans AUCUN colspan/rowspan dans tout le tableau (un rowspan de 0, qui étend la cellule jusqu’à la fin de son groupe de lignes, est une fusion ; un colspan de 0 vaut 1). Un tableau dont le rôle (le premier jeton connu et non abstrait de l’attribut role, sans tenir compte de la casse) est autre que table, grid ou treegrid, comme un tableau de mise en page avec role="presentation", est exclu : il n’a pas de cellules de données.
Attendu. Un tableau sans aucune cellule d’en-tête donne lieu à une seule question, sur le tableau : le balisage ne permet pas de distinguer un tableau de mise en page, qui n’a pas besoin d’en-têtes, d’un tableau de données qui en est dépourvu. Dans un tableau doté de cellules d’en-tête, chaque <td> non vide a un en-tête associé, par l’un des moyens suivants :
- un attribut
headersnon vide (on lui fait confiance ici ; savoir s’il se résout en ids de<th>réels relève detable-headers-attr-valid, pas de cette règle), OU - un en-tête de colonne implicite : une cellule d’en-tête dans la même colonne, sur une ligne précédente, OU
- un en-tête de ligne implicite : une cellule d’en-tête plus tôt sur la même ligne.
Une cellule d’en-tête est un <th> sans autre rôle, ou toute cellule avec role="columnheader" ou role="rowheader" (un tel <td> est un en-tête, pas une cellule de données). Un <td> sans texte ni contenu susceptible de porter un nom (une image, un contrôle, un élément doté d’un libellé ARIA) ne contient pas de données et n’a donc pas besoin d’en-tête ; la cellule d’angle vide au-dessus des en-têtes de ligne est le cas habituel.
Ce que rapporte un constat.
row,column: la position de la cellule dans le tableau, en comptant à partir de 0 : les lignes depuis le haut, les cellules depuis la gauche dans la ligne.
Ces champs de data.details aident à lire et à reproduire un constat. À part reasonCode et les quelques champs que la page Schéma de sortie donne comme stables, ils ne constituent pas un contrat stable : un champ peut être renommé ou supprimé dans une version mineure, ne vous appuyez donc pas dessus.
Exemples
<table><tr><th></th><th>Q1</th><th>Q2</th><th>Q3</th></tr><tr><th>North</th><td>1</td><td>2</td><td>3</td></tr><tr><th>South</th><td>4</td><td>5</td><td>6</td></tr><tr><th>East</th><td>7</td><td>8</td><td>9</td></tr></table>
Chaque <td> a à la fois un en-tête de ligne implicite (<th> plus tôt dans sa ligne) et un en-tête de colonne implicite (<th> plus haut dans sa colonne). La taille minimale de 4x4 n’est pas facultative : cette règle ne s’applique pas aux tableaux plus petits.
<table><tr><th>Name</th><th>Team</th><th>Room</th><td></td></tr><tr><td>Ana</td><td>Sales</td><td>2.01</td><td>Mon</td></tr><tr><td>Bo</td><td>Legal</td><td>2.04</td><td>Tue</td></tr><tr><td>Chen</td><td>IT</td><td>3.10</td><td>Fri</td></tr></table>
La ligne d’en-tête s’arrête une colonne trop tôt : les cellules de la dernière colonne n’ont aucune association de ligne, de colonne ou d’attribut headers. Un tableau sans aucune cellule d’en-tête donne lieu à une question à la place, car il peut s’agir d’un tableau de mise en page, qui n’en a pas besoin.
Comment vérifier
Quand cette règle ne peut pas trancher, elle renvoie cantTell et laisse la question à une personne. Chaque question qu’elle peut poser figure ici sous son code de raison, avec les étapes pour y répondre. Un constat porte les mêmes étapes dans howToCheck, dans la langue de l’analyse. Voir Schéma de sortie.
TD_TABLE_NO_HEADERS
- Regardez à l’écran le tableau indiqué par le rapport.
- Déterminez s’il présente des données en lignes et en colonnes, avec une première ligne ou une première colonne qui étiquette le reste, ou s’il ne fait que disposer du contenu côte à côte.
- S’il contient des données, inspectez la ligne ou la colonne d’étiquettes et vérifiez si elle utilise des éléments <th> (ou des attributs headers).
Réussite. Le tableau ne sert qu’à la mise en page (et devrait l’indiquer avec role="presentation"), ou ses cellules d’étiquette sont balisées comme des en-têtes.
Échec. Le tableau contient des données mais aucune cellule n’est balisée comme en-tête : les utilisateurs de lecteur d’écran ne savent pas ce que signifie chaque valeur, ce qui ne respecte pas le critère WCAG 1.3.1 (F46).