Dans les tableaux complexes à double entrée — colonnes ET lignes d'en-têtes — chaque case est-elle correctement reliée à toutes ses en-têtes ?
Critère officiel 5.7 — 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) ?
Pourquoi c'est important
Dans un tableau avec des en-têtes sur deux axes — jours en colonnes, élus en lignes par exemple — chaque case doit être reliée aux deux en-têtes correspondants. Sans cette liaison, le logiciel de lecture annonce uniquement la valeur de la case, sans préciser à quel élu ni à quel jour elle appartient.
Exemples concrets
Ce qui est conforme
Le tableau des permanences, avec les élus en lignes et les jours en colonnes, est configuré pour que chaque case soit annoncée : « Élu : Mme Leclerc — Jour : Mercredi — Horaire : 9h-11h. » L'utilisateur navigue sans ambiguïté.
Ce qui pose problème
Le même tableau est publié avec des en-têtes de colonnes déclarés, mais pas les en-têtes de lignes. Le logiciel annonce « Mercredi : 9h-11h » sans préciser à quel élu correspond ce créneau.
Comment agir
Posez la question précise à votre prestataire : « Dans mes tableaux à double entrée, chaque cellule est-elle reliée à la fois à son en-tête de colonne ET à son en-tête de ligne ? » C'est une configuration technique spécifique, distincte de la simple déclaration des en-têtes.
Règles clés
- Tableau simple : les en-têtes de colonnes utilisent <th scope="col">, les en-têtes de lignes utilisent <th scope="row">.
- Tableau complexe (en-têtes fusionnés, hiérarchiques) : chaque <th> a un attribut id unique, chaque <td> a un attribut headers listant les id des en-têtes qui lui correspondent.
- Ne jamais styler des <div> ou <span> pour reproduire l'apparence d'un tableau — utiliser <table> avec la sémantique correcte.
- Un <caption> est recommandé pour titrer le tableau et le rendre identifiable par les AT.
Erreurs fréquentes
- Tableau de données avec des <td> en première ligne ou colonne au lieu de <th>
- <th> sans attribut scope — l'association colonne/ligne est ambiguë pour les AT
- Tableau complexe avec en-têtes fusionnés (colspan/rowspan) sans attributs headers + id
- Tableau de données stylisé en CSS pour ressembler à un tableau mais construit avec des <div>
Exemples de code
tableau sans scope
✗ Non conforme<table>
<tr>
<th>Produit</th>
<th>2022</th>
<th>2023</th>
</tr>
<tr>
<td>Logiciel A</td>
<td>8 500</td>
<td>12 000</td>
</tr>
</table>Les <th> n'ont pas d'attribut scope. Certains lecteurs d'écran devinent l'association, d'autres non. Le comportement est imprévisible selon la technologie d'assistance.
tableau simple avec scope
✓ Conforme<table>
<caption>Chiffre d'affaires par produit (en euros)</caption>
<thead>
<tr>
<th scope="col">Produit</th>
<th scope="col">2022</th>
<th scope="col">2023</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Logiciel A</th>
<td>8 500 €</td>
<td>12 000 €</td>
</tr>
</tbody>
</table>scope="col" sur les en-têtes de colonnes, scope="row" sur les en-têtes de lignes. Le lecteur d'écran annonce pour "12 000 €" : "Produit : Logiciel A — 2023 — 12 000 €".
tableau complexe avec headers + id
✗ Non conforme<table>
<tr>
<th colspan="2">Nord</th>
<th colspan="2">Sud</th>
</tr>
<tr>
<th>Q1</th><th>Q2</th>
<th>Q1</th><th>Q2</th>
</tr>
<tr>
<td>100</td><td>120</td>
<td>90</td><td>110</td>
</tr>
</table>Tableau à en-têtes imbriqués sans attributs id/headers. Chaque cellule de données est associée à deux niveaux d'en-têtes (région + trimestre) — cette relation est invisible aux AT.
tableau complexe avec headers + id
✓ Conforme<table>
<caption>Ventes par région et trimestre</caption>
<thead>
<tr>
<th id="nord" colspan="2">Nord</th>
<th id="sud" colspan="2">Sud</th>
</tr>
<tr>
<th id="nord-q1" headers="nord">Q1</th>
<th id="nord-q2" headers="nord">Q2</th>
<th id="sud-q1" headers="sud">Q1</th>
<th id="sud-q2" headers="sud">Q2</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="nord nord-q1">100</td>
<td headers="nord nord-q2">120</td>
<td headers="sud sud-q1">90</td>
<td headers="sud sud-q2">110</td>
</tr>
</tbody>
</table>Chaque <th> a un id unique. Chaque <td> liste dans headers tous les id des en-têtes qui lui correspondent. Le lecteur d'écran annonce pour "100" : "Nord — Q1 — 100".
Référence WCAG : 1.3.1