empty-table-header
Les cellules d’en-tête de tableau ne doivent pas être vides
Vérifie que les cellules d’en-tête de tableau (<th>, ou tout élément doté de role="columnheader"/"rowheader") ont un contenu textuel visible. Un en-tête nommé uniquement via aria-label/aria-labelledby est aussi signalé, car sa prise en charge réelle par les lecteurs d’écran et les navigateurs est inégale.
Applicabilité. S’applique aux éléments <th> qui ne portent pas de rôle explicite contradictoire, ainsi qu’à tout élément (<th> natif ou non) dont le rôle se résout en columnheader ou rowheader. L’attribut role est une liste de repli : son premier jeton connu et non abstrait, sans tenir compte de la casse, est le rôle, donc role="foo columnheader" compte, et un <th role="foo"> (aucun jeton connu) garde son rôle implicite d’en-tête. Un <th> qui redéclare explicitement role="columnheader"/"rowheader" reste couvert, mais un <th role="presentation"> (qui n’est plus vraiment un en-tête) est correctement exclu, et un en-tête défini uniquement par un rôle ARIA (p. ex. un <div role="columnheader"> dans un widget role="grid"/role="table") est également détecté. Un élément personnalisé auquel ses ElementInternals donnent le rôle columnheader ou rowheader (this.attachInternals().role), sans attribut role qui en nomme un autre, compte comme un élément natif doté de ce rôle.
Attendu. La cellule d’en-tête a un contenu textuel visible. Un <th> nommé uniquement via aria-label/aria-labelledby (sans texte visible) est AUSSI signalé, et non considéré comme équivalent : en pratique, la prise en charge d’aria-label sur <th> est inégale. NVDA+Firefox et VoiceOver iOS+Safari l’ignorent totalement (seul le texte visible est annoncé), et JAWS+Chrome/IE11 n’annoncent eux aussi que le texte visible de la cellule d’en-tête elle-même. Le texte visible est le seul mécanisme dont le fonctionnement est confirmé sur toutes les combinaisons testées. Voir https://html5accessibility.com/stuff/2024/05/22/not-so-short-note-on-aria-label-usage-big-table-edition/.
Ce que rapporte un constat.
ariaName(TABLE_HEADER_NAME_NOT_VISIBLE_TEXT) : le nom que la cellule d’en-tête reçoit dearia-labelouaria-labelledbyau lieu d’un texte visible.
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>Name</th></tr></table>
La cellule d’en-tête a un contenu textuel visible.
<table><tr><th></th></tr></table>
La cellule d’en-tête n’a ni contenu textuel ni nom accessible.
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.
TABLE_HEADER_EMPTY
- Repérez la cellule d’en-tête indiquée par le rapport et regardez ce qu’elle affiche à l’écran.
- Inspectez-la dans le panneau Accessibilité des outils de développement du navigateur et notez son nom calculé ; une image avec un texte alt ou une icône étiquetée à l’intérieur peut lui en donner un.
- Regardez les cellules en dessous ou à côté et déterminez si elles ont besoin d’un en-tête pour être comprises.
- S’il s’agit de la cellule d’angle supérieur gauche vide d’un tableau dont la première colonne contient des en-têtes de ligne, notez qu’elle ne couvre rien.
Réussite. La cellule a un nom qui décrit sa colonne ou sa ligne, ou c’est une cellule d’angle vide qui ne couvre aucune donnée (mieux vaut alors la baliser en td).
Échec. La cellule couvre des cellules de données mais n’a ni texte visible ni nom : sa colonne ou sa ligne n’a donc pas d’en-tête, un manquement aux bonnes pratiques pour les cellules d’en-tête de tableau.
TABLE_HEADER_NAME_NOT_VISIBLE_TEXT
- Repérez la cellule d’en-tête indiquée par le rapport et lisez le nom que donne le rapport (issu de aria-label ou aria-labelledby).
- Regardez la cellule à l’écran et confirmez qu’elle n’affiche aucun texte propre.
- Avec un lecteur d’écran, placez-vous sur une cellule de données de cette colonne ou de cette ligne et écoutez si le nom de l’en-tête est annoncé avec elle.
Réussite. L’en-tête est annoncé avec ses cellules de données, ou la cellule reçoit un texte visible (un texte masqué visuellement dans la cellule convient aussi) qui donne le même nom.
Échec. L’en-tête n’a pas de texte visible et repose sur un nom ARIA qui n’est pas annoncé avec ses cellules de données, un manquement aux bonnes pratiques relatives au nom accessible.