table-headers-attr-valid

L’attribut « headers » des cellules de tableau doit faire référence à des cellules d’en-tête valides

automaticWCAG 1.3.1 (A)confiance : highgravité : seriousperceivable

Vérifie que chaque id de l’attribut headers d’un <td>/<th> se résout en une cellule (<td> ou <th>) du même tableau (ni absente, ni élément autre qu’une cellule, ni la cellule elle-même).

Applicabilité. S’applique aux éléments <td>/<th> qui portent un attribut headers non vide, dans un <table> dont le rôle sémantique reste table/grid/treegrid : un rôle explicite quelconque (role="presentation"/"none", mais aussi role="heading" ou tout autre rôle réel) remplace la sémantique native du tableau, si bien qu’il n’y a plus de tableau que headers puisse décrire. Un rôle de présentation sur un tableau doté d’un attribut ARIA global ou d’un tabindex est ignoré, selon la résolution des conflits de WAI-ARIA, et le tableau en reste un. Correspond à l’applicabilité d’ACT a25f45.

Attendu. Chaque jeton d’id de l’attribut headers se résout en un élément qui : (a) existe, (b) est une cellule (<td> ou <th>) du même <table> que la cellule qui y fait référence, et (c) n’est pas la cellule elle-même. Un <td> qui sert d’en-tête via role="columnheader"/"rowheader" est une cible valide, au même titre qu’un simple <th> : ACT a25f45 n’exige pas la balise native.

Ce que rapporte un constat.

invalid : un élément par id de l’attribut headers qui ne pointe pas vers un en-tête valide : id, et reason, qui vaut missing (aucun élément n’a cet id), self-reference (la cellule pointe vers elle-même), not-a-cell (l’élément n’est ni un <td> ni un <th>) ou different-table (la cellule se trouve dans un autre tableau).

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

pass

<table>
  <tr><th id="h1">Name</th></tr>
  <tr><td headers="h1">Apple</td></tr>
</table>

headers="h1" se résout en une cellule réelle du même tableau.

fail

<table>
  <tr><th id="h2">Name</th></tr>
  <tr><td headers="missing">Banana</td></tr>
</table>

headers fait référence à un id qui n’existe pas dans le tableau.

Voir le code source