Règle n° 242 - Les cellules des tableaux de données sont reliées à leurs entêtes.

Certains utilisateurs vocalisent les contenus en ligne grâce à des aides techniques. Un tableau très clair à l’écran peut devenir totalement incompréhensible en mode vocal. Il est pourtant assez facile de prévoir ce cas de figure.

#Accessibilité #Développement #Structure et code #Éditorial

Objectif

permettre aux aides techniques de restituer l’information contenue dans les tableaux de données de manière compréhensible, en indiquant à l’utilisateur les relations logiques entre contenu et entêtes du tableau,
améliorer l’accessibilité des contenus aux personnes handicapées.

Solution technique

Utiliser l’élément HTML th et son attribut scope pour baliser les cellules d’entêtes et expliciter leur portée (scope de valeur col pour un entête de colonne, de valeur row pour un entête de ligne).

Pour les entêtes qui ne s’appliquent qu’à une partie d’une ligne ou d’une colonne, contrôler la présence systématique de l’attribut id pour l’élément th et de l’attribut headers pour les éléments td avec les valeurs appropriées :

donner à chaque entête (élément th) un attribut id (par exemple, id="foo"),
utiliser l’attribut headers dans chaque cellule (élément td) pour indiquer les entêtes associés (par exemple, headers="foo" pour chaque cellule rattachée à l’entête ayant l’attribut id="foo").

Moyen de contrôle

Dans le code généré des tableaux de données :

vérifier l’utilisation systématique de l’élément th pour baliser les entêtes de ligne ou de colonne,
pour les entêtes s’appliquant à la totalité d’une ligne ou d’une colonne, contrôler la présence systématique de l’attribut scope doté de la valeur appropriée (row pour une ligne ou col pour une colonne),
pour les entêtes qui ne s’appliquent qu’à une partie d’une ligne ou d’une colonne, contrôler la présence systématique de l’attribut id pour l’élément th et de l’attribut headers pour les éléments td avec les valeurs appropriées,
chaque entête (élément th) doit être doté d’un attribut id (par exemple, id="foo"),
l’attribut headers doit être utilisé dans chaque cellule (élément td) pour indiquer les entêtes associés (par exemple, headers="foo" pour chaque cellule rattachée à l’entête ayant l’attribut id="foo").