Accessia
Auditer mon site
Tous les critères par thématique

Thématique 5 · Tableaux

Critère RGAA 5.7 : Association cellules / en-têtes

Dans un tableau, chaque cellule doit être annoncée avec ses en-têtes ; sans association correcte, les données perdent leur sens.

Niveau
A
WCAG 2.2
1.3.1
Thématique
Tableaux
Vérification
Détecté automatiquement

La question posée par le RGAA

Pour chaque tableau de données, la technique appropriée permettant d’associer chaque cellule avec ses en-têtes est-elle utilisée (hors cas particuliers) ?

Comment respecter ce critère

  • Pour un tableau simple, ajoutez scope="col" ou scope="row" sur les th.
  • Pour un tableau complexe, utilisez les attributs id et headers.

Exemple

L'association en-têtes/cellules n'est pas exploitable (scope ou headers/id incorrects).

✗ À éviter

<th>Trimestre</th>

✓ À faire

<th id="t1" scope="col">Trimestre</th>

Les tests officiels

Pour être conforme, chaque élément concerné de la page doit satisfaire les tests suivants :

  1. 5.7.1 — Pour chaque contenu de balise <th> s’appliquant à la totalité de la ligne ou de la colonne, la balise <th> respecte-t-elle une de ces conditions (hors cas particuliers) ? (La balise <th> possède un attribut id unique ; La balise <th> possède un attribut scope ; La balise <th> possède un attribut WAI-ARIA role="rowheader" ou role="columnheader".)
  2. 5.7.2 — Pour chaque contenu de balise <th> s’appliquant à la totalité de la ligne ou de la colonne et possédant un attribut scope, la balise <th> vérifie-t-elle une de ces conditions ? (La balise <th> possède un attribut scope avec la valeur "row" pour les en-têtes de ligne ; La balise <th> possède un attribut scope avec la valeur "col" pour les en-têtes de colonne.)
  3. 5.7.3 — Pour chaque contenu de balise <th> ne s’appliquant pas à la totalité de la ligne ou de la colonne, la balise <th> vérifie-t-elle ces conditions ? (La balise <th> ne possède pas d’attribut scope ; La balise <th> ne possède pas d’attribut WAI-ARIA role="rowheader" ou role="columnheader" ; La balise <th> possède un attribut id unique.)
  4. 5.7.4 — Pour chaque contenu de balise <td> ou <th> associée à un ou plusieurs en-têtes possédant un attribut id, la balise vérifie-t-elle ces conditions ? (La balise possède un attribut headers ; L’attribut headers possède la liste des valeurs d’attribut id des en-têtes associés.)
  5. 5.7.5 — Pour chaque balise pourvue d’un attribut WAI-ARIA role="rowheader" ou role="columnheader" dont le contenu s’applique à la totalité de la ligne ou de la colonne, la balise vérifie-t-elle une de ces conditions ? (La balise possède un attribut WAI-ARIA role="rowheader" pour les en-têtes de ligne ; La balise possède un attribut WAI-ARIA role="columnheader" pour les en-têtes de colonne.)

Source : RGAA 4.1.2, critère 5.7, DINUM (nouvel onglet), sous Licence Ouverte. Le RGAA précise aussi des cas particuliers et un glossaire à consulter pour un audit officiel.

Comment Accessia le vérifie

Accessia détecte automatiquement les manquements à ce critère : l'analyse en ligne et l'extension Chrome localisent chaque élément en cause et proposent le correctif. Un contrôle humain reste utile pour les cas particuliers.