Aller au contenu principal
Accessio

Tableaux de données complexes : structure accessible RGAA

Un tableau de données avec fusions de cellules, en-têtes hiérarchisés ou totaux imbriqués reste navigable et compréhensible s'il est correctement balisé. Sans association programmatique entre les cellules de données et leurs en-têtes, les lecteurs d'écran perdent le contexte et rendent les chiffres inexploitables. Avec l'European Accessibility Act entré en vigueur le 28 juin 2025, la conformité au niveau WCAG 2.1 AA devient obligatoire sous contrôle de la DGCCRF en France : 7 500 € pour un premier manquement et 15 000 € en cas de récidive.

Pourquoi les fusions de cellules posent problème

Les lecteurs d'écran parcourent les tableaux cellule par cellule, dans l'ordre linéaire du DOM. Lorsqu'une cellule est fusionnée (colspan ou rowspan) ou que plusieurs en-têtes s'appliquent, le lien visuel entre la donnée et son en-tête disparaît dans la restitution sonore. L'utilisateur entend un chiffre isolé sans savoir à quelle date, à quelle catégorie ou à quel sous-total il appartient — la donnée devient inexploitable. Le critère WCAG 1.3.1 (Info and Relationships, niveau A) impose de préserver ce lien programmatiquement.

Tableaux simples : attribute scope sur th

Pour un tableau à une seule ligne d'en-têtes ou une seule colonne d'en-têtes, scope="col" ou scope="row" suffit sur la balise th. Le lecteur d'écran annoncera l'en-tête correspondant avant la valeur de la cellule. Exemple : <table><caption>Chiffre d'affaires par trimestre</caption><thead><tr><th scope="col">Trimestre</th><th scope="col">CA</th></tr></thead>...</table>. Cette approche satisfait le critère WCAG 1.3.1 et le critère RGAA 5.7.

Tableaux complexes : id sur th, headers sur td

Quand la cellule dépend de plusieurs en-têtes (tableau croisé avec regroupements de colonnes, totaux intermédiaires), scope est insuffisant. Identifiez chaque th avec un attribut id unique : <th id="th-annee">Année</th>. Puis listez tous les en-têtes parents dans l'attribut headers de chaque td : <td headers="th-annee th-trimestre th-total">352 000</td>. Le lecteur d'écran annoncera la chaîne d'en-têtes parents avant la valeur. C'est obligatoire pour le critère RGAA 5.7 sur tableaux complexes.

Caption : RGAA 5.4 et 5.5

Tout tableau de données doit posséder une balise caption, premier enfant de la balise table. Elle constitue le titre du tableau, lu en premier par le lecteur d'écran et lu également aux utilisateurs voyants. Le critère RGAA 5.5 impose que cette caption soit pertinente : elle doit décrire le sujet et, si utile, la période ou la portée. À éviter : Tableau 1, Tableau comparatif. À privilégier : Recettes par région et par trimestre en 2024.

summary obsolète : alternatives modernes

L'attribut summary, autrefois utilisé pour décrire la structure d'un tableau complexe en HTML 4, est totalement obsolète en HTML5. Les technologies d'assistance l'ignoraient déjà largement en pratique. Pour les tableaux financiers complexes, privilégiez une caption explicite, un paragraphe en texte clair au-dessus du tableau ou un lien vers une note méthodologique. Ces alternatives sont mieux indexées et mieux restituées par les lecteurs d'écran modernes.

Alternatives aux tableaux croisés dynamiques

Les tableaux croisés dynamiques (TCD) générés par Excel ou outils BI sont rarement accessibles tels quels. Préférez : un export CSV pour les utilisateurs manipulant la donnée, une dataviz accessible (SVG avec alternative textuelle pertinente, RGAA 1.1.5), ou une structure en listes à définition (dl, ul) si la quantité de données reste modérée. Une grille interactive ARIA reste possible mais demande un effort de remédiation supérieur.

Stratégie de test : NVDA + JAWS + VoiceOver

La validation repose sur la navigation réelle. Sous Windows, NVDA + Firefox : touches de navigation de tableau (souvent NVDA+espace). Sous macOS : VoiceOver avec VO+flèches pour circuler dans les cellules de tableau. À chaque déplacement, vérifiez que le lecteur d'écran annonce l'en-tête associé AVANT la valeur de la cellule. Si vous n'entendez pas l'en-tête, ou si vous l'entendez incorrectement, le tableau n'est pas conforme.

Testez l’accessibilité de votre site, gratuitement

Voyez en moins d'une minute où votre site rencontre ce type d'écart, gratuitement.

Lancer le diagnostic gratuit

Questions fréquentes

scope ou headers sur un tableau à double entrée ?
Pour un tableau à une entrée (1 ligne d'en-tête, plusieurs colonnes), scope=col suffit. Pour un tableau à plusieurs niveaux d'en-têtes (lignes ET colonnes emboîtées, totaux imbriqués), headers est obligatoire : chaque cellule de données liste tous les id de ses en-têtes parents.
Comment tester un tableau financier dans Excel avant publication ?
Utilisez le vérificateur d'accessibilité d'Excel (Revue > Vérifier l'accessibilité). Il signale l'absence de balises d'en-tête ou de texte alternatif. Si le tableau de destination est HTML, vous devrez reconstruire les relations programme avec id et headers, car l'export Excel ne les génère pas tous.
Un tableau croisé dynamique exporté en HTML peut-il être accessible ?
Rarement tel quel. Les outils d'export produisent souvent du HTML avec des cellules fusionnées sans association d'en-têtes. Il faut généralement nettoyer le code source généré pour rajouter les attributs id, headers et scope à la main, ou via un script dédié.
Faut-il une caption même courte ?
Oui, sans exception (RGAA 5.4). Même une caption courte comme Tableau 1 est mieux que pas de caption du tout. Mais visez toujours la pertinence (RGAA 5.5) : la caption doit décrire le contenu réel et la période.
Quelle alternative pour une dataviz complexe ?
Deux options principales : (1) fournir les données numériques dans un tableau HTML adjacent avec caption, ou (2) proposer un lien vers une version textuelle complète en téléchargement. Pour les graphiques, une SVG avec accessibilité (ARIA ou texte alternatif détaillé) reste acceptable quand la visualisation apporte réellement de l'information.
Comment distinguer tableau de données et tableau de mise en page ?
Un tableau de données compare des valeurs (planning, tarifs, statistiques). Un tableau de mise en page positionne des éléments à l'écran. Pour la mise en page, utilisez CSS (Grid, Flexbox) plutôt qu'une balise table. Si l'ancien code l'impose, le RGAA 5.3 impose qu'il n'utilise aucun attribut propre aux tableaux de données (ni th, ni caption, ni summary).
L'EAA privé impose-t-elle un équivalent accessible pour les tableaux dans les e-mails ?
Oui, si l'e-mail contient des données transactionnelles ou financières. Depuis le 28 juin 2025, l'EAA impose le niveau WCAG 2.1 AA aux services numériques privés. Les tableurs exportés (.xlsx partagés) et les e-mails transactionnels intégrant des tableaux relèvent du même cadre. La DGCCRF peut sanctionner de 7 500 € à 15 000 € les écarts persistants.

Pour aller plus loin

Besoin d'aller au-delà du diagnostic ? Demandez un audit d'accessibilité ou consultez nos tarifs.

Retour à tous les guides d'accessibilité.