Chaque tableau de données complexe a-t-il un résumé ?
Un utilisateur de lecteur d’écran arrive sur un tableau à deux niveaux d’en-têtes : les années en première ligne, les trimestres en seconde. Il peut naviguer cellule par cellule, mais sans comprendre la structure d’ensemble, il tâtonne. Le résumé est la carte du territoire.
Un tableau est complexe dès que ses en-têtes ne se trouvent pas uniquement en première ligne et/ou première colonne, ou lorsque leur portée ne couvre pas toute la colonne ou la ligne. En pratique : colspan, rowspan, plusieurs niveaux d’en-têtes, groupes de colonnes imbriqués. Si vous hésitez, posez-vous cette question : un utilisateur aveugle peut-il comprendre comment naviguer dans ce tableau sans voir sa mise en page ?
Le résumé doit expliquer la nature et la structure du tableau. Pas son titre. Ça, c’est le rôle du <caption> au sens du critère 5.4. En HTML5, la technique recommandée consiste à intégrer le résumé directement dans le <caption>. L’attribut summary reste recevable uniquement pour les documents antérieurs à HTML5. La troisième option : un passage de texte lié via aria-describedby.
Pas de résumé, pas d’orientation.
Un test pour vérifier qu'un résumé accompagne chaque tableau complexe
Résumé structurel d'un tableau de données complexe
- Repérez dans la page tous les tableaux de données complexes : éléments
<table>ou éléments avecrole="table"dont les en-têtes ne se trouvent pas uniquement en première ligne et/ou première colonne, ou dont la portée ne couvre pas toute la colonne ou la ligne (présence decolspan,rowspan, en-têtes multi-niveaux). - Pour chaque tableau complexe identifié, vérifiez qu’un texte décrivant la nature et la structure du tableau est présent dans l’une de ces trois formes :
- Dans l’élément
<caption>du tableau, avec un contenu qui va au-delà du simple titre ; - Dans l’attribut
summaryde<table>(HTML et XHTML antérieurs à HTML5 uniquement) ; - Dans un passage de texte référencé par
aria-describedbysur l’élément du tableau.
- Dans l’élément
- Si chaque tableau complexe dispose d’un tel résumé structurel, le test est validé.
Exemples
❌ Non conforme : Tableau complexe sans résumé de structure
<table>
<caption>Ventes 2023-2024</caption>
<tr>
<th rowspan="2">Région</th>
<th colspan="2" scope="colgroup">2023</th>
<th colspan="2" scope="colgroup">2024</th>
</tr>
<tr>
<th scope="col">T1</th>
<th scope="col">T2</th>
<th scope="col">T1</th>
<th scope="col">T2</th>
</tr>
<tr>
<td>Nord</td>
<td>12 000 €</td>
<td>15 000 €</td>
<td>13 500 €</td>
<td>16 200 €</td>
</tr>
</table>Ce tableau a deux niveaux d’en-têtes avec des colspan et un rowspan. Il est donc complexe. Le <caption> donne un titre, mais n’explique pas la structure : un utilisateur de lecteur d’écran ne sait pas d’emblée que les colonnes sont groupées par année ni comment lire les données croisées. Ce <caption> valide le critère 5.4 (titre associé), pas le 5.1.
✅ Conforme : Tableau complexe avec résumé intégré dans le caption
<table>
<caption>
Ventes 2023-2024 : ce tableau présente les ventes par région (lignes)
croisées avec les trimestres sur deux années (colonnes groupées par année).
La première ligne d'en-têtes regroupe les années 2023 et 2024 ;
la seconde détaille les trimestres T1 et T2 pour chacune.
</caption>
<tr>
<th rowspan="2">Région</th>
<th colspan="2" scope="colgroup">2023</th>
<th colspan="2" scope="colgroup">2024</th>
</tr>
<tr>
<th scope="col">T1</th>
<th scope="col">T2</th>
<th scope="col">T1</th>
<th scope="col">T2</th>
</tr>
<tr>
<td>Nord</td>
<td>12 000 €</td>
<td>15 000 €</td>
<td>13 500 €</td>
<td>16 200 €</td>
</tr>
</table>Le <caption> contient à la fois le titre et un résumé structurel. Le lecteur d’écran annonce ce texte avant la première cellule : l’utilisateur sait immédiatement comment le tableau est organisé et peut naviguer de manière orientée, sans découvrir la logique au fur et à mesure.
✅ Conforme : Tableau complexe avec résumé via aria-describedby
<p id="resume-ventes">
Ce tableau présente les ventes par région (lignes) et par trimestre
sur deux années (colonnes groupées par année). Lisez la première ligne
d'en-têtes pour identifier l'année, la seconde pour le trimestre.
</p>
<table aria-describedby="resume-ventes">
<caption>Ventes 2023-2024</caption>
<tr>
<th rowspan="2">Région</th>
<th colspan="2" scope="colgroup">2023</th>
<th colspan="2" scope="colgroup">2024</th>
</tr>
<tr>
<th scope="col">T1</th>
<th scope="col">T2</th>
<th scope="col">T1</th>
<th scope="col">T2</th>
</tr>
<tr>
<td>Nord</td>
<td>12 000 €</td>
<td>15 000 €</td>
<td>13 500 €</td>
<td>16 200 €</td>
</tr>
</table>Le résumé est un paragraphe visible, lié au tableau via aria-describedby. Cette technique bénéficie à tous les utilisateurs : les voyants lisent la description avant d’aborder le tableau, les utilisateurs de lecteurs d’écran l’entendent lors de la prise de focus. C’est souvent la meilleure option pour les structures particulièrement complexes.
Astuces et pièges
⚠️ Un <caption> présent ne valide pas automatiquement le critère 5.1
C’est l’erreur la plus fréquente en audit. Le <caption> remplit le critère 5.4 (titre associé au tableau) dès qu’il existe. Pour valider le critère 5.1, son contenu doit décrire la structure du tableau, pas se contenter de le nommer. <caption>Résultats par région</caption> valide 5.4 et échoue 5.1.
💡 Préférer aria-describedby pour les tableaux très complexes
Quand la structure est particulièrement touffue, un aria-describedby pointant vers un paragraphe visible est souvent plus lisible qu’un <caption> surchargé. Le texte est accessible à tous, peut être aussi long que nécessaire, et ne surcharge pas visuellement l’entête du tableau.
⚠️ L’attribut summary est obsolète en HTML5
L’attribut summary sur <table> est accepté par le RGAA uniquement pour les documents HTML et XHTML antérieurs à HTML5. Sur une page HTML5, son usage génère une erreur de validation W3C. Utilisez <caption> ou aria-describedby selon le contexte.
⚠️ Les tableaux construits avec des rôles ARIA sont aussi concernés
Le critère s’applique également aux éléments avec role="table", typiquement des grilles construites avec des <div>. Si un tel composant a une structure complexe d’en-têtes (via role="columnheader" ou role="rowheader" multi-niveaux), il doit exposer un résumé via aria-describedby.
⚠️ Masquer le résumé via CSS : techniquement valide, pratiquement discutable
Le RGAA mentionne la possibilité de masquer le résumé via CSS. En pratique, c’est difficile à justifier : si ce résumé est jugé indispensable pour comprendre le tableau, pourquoi le cacher aux voyants ? Un résumé accessible uniquement aux lecteurs d’écran passe l’audit technique mais prive les autres utilisateurs d’une information jugée nécessaire.
Questions fréquentes
Comment distinguer un tableau simple d'un tableau complexe selon le RGAA ?
Un tableau est complexe dès que ses en-têtes ne se trouvent pas uniquement en première ligne et/ou première colonne, ou lorsqu’un en-tête couvre un sous-ensemble de cellules via colspan ou rowspan. Un tableau avec scope="col" sur tous ses en-têtes en première ligne est simple. Un tableau avec deux niveaux d’en-têtes de colonnes (ex. : années regroupant des trimestres) est complexe. Règle pragmatique : si la structure nécessite une explication pour être comprise, c’est un tableau complexe.
Comment remplacer l'attribut summary déprécié pour résumer un tableau en HTML5 ?
Non. L’attribut summary est obsolète depuis HTML5 et génère une erreur de validation W3C. Le RGAA l’accepte uniquement pour les documents HTML et XHTML antérieurs à HTML5. Sur une page HTML5, utilisez un résumé dans le <caption> ou liez un paragraphe descriptif via aria-describedby.
Où et comment exposer le résumé d'un tableau complexe selon le RGAA 5.1 ?
Ce n’est pas obligatoire techniquement : un résumé masqué avec une classe sr-only passe l’audit RGAA. Cela dit, rendre le résumé visible bénéficie à tous les utilisateurs, pas seulement aux lecteurs d’écran. Ne masquez pas le résumé sauf contrainte de design avérée.
Comment auditer le critère RGAA 5.1 sur les résumés de tableaux complexes ?
Inspectez le DOM : repérez les <table> et role="table" dans la page, identifiez ceux avec plusieurs niveaux d’en-têtes ou des colspan/rowspan. Pour chacun, vérifiez (1) que le <caption> contient un texte décrivant la structure, au-delà du simple titre ; (2) qu’un attribut aria-describedby pointe vers un texte descriptif ; ou (3) qu’un summary est présent sur un document non HTML5.
Quand des en-têtes en deuxième colonne rendent-ils un tableau complexe selon le RGAA ?
Selon la définition littérale du RGAA, oui — les en-têtes ne sont pas en première colonne. Mais l’interprétation raisonnable consiste à considérer qu’un tableau est complexe lorsque sa complexité structurelle justifie réellement un résumé pour la navigation. Un tableau avec une colonne de numérotation en première position et les en-têtes en seconde reste généralement compréhensible sans résumé. Cette zone grise existe dans le RGAA : restez pragmatique et demandez-vous si un résumé aiderait réellement un utilisateur de lecteur d’écran.