Série RGAA en pratique · Épisode 4 · 5 min

Un tableau de données bien structuré

Rendre un tableau de données accessible au sens du RGAA : titre avec la balise caption, en-têtes en balises th, association cellule/en-tête via scope (et headers/id pour les cas co…

Publié le 14 septembre 2026.Consulter la transcription de la vidéo Voir sur YouTube (nouvelle fenêtre)

Chapitres

Transcription

Texte intégral de la narration de l’épisode.

Situations du quotidien

Regarde ce tableau. À l’œil, tout est clair : des villes, des mois, des chiffres de ventes. Maintenant, imagine que tu ne le vois pas, et qu’un lecteur d’écran te le lit. Sans balisage, il annonce juste : 847, 1203, 956. Des nombres qui tombent, sans savoir à quelle ville ni à quel mois ils se rapportent. Pas de titre, pas d’en-tête, pas d’association. Le tableau existe visuellement, mais l’information, elle, s’est évaporée. Le RGAA a une thématique entière pour éviter ça : les tableaux.

Un tableau de données bien structuré

Le RGAA range les tableaux dans une thématique dédiée. L’idée est simple : un tableau de données doit dire trois choses au lecteur d’écran. De quoi il parle, ça c’est son titre, critère 5.4. Quelles sont ses colonnes et ses lignes, ce sont ses en-têtes, critère 5.6. Et pour chaque cellule, à quel en-tête elle appartient, c’est l’association, critère 5.7. On verra aussi le piège inverse, le critère 5.8 : un tableau qui sert juste à la mise en page ne doit surtout pas emprunter ces balises. On y va dans l’ordre.

caption, th et scope

Voici les deux versions du même tableau. À gauche, tout est en td. Techniquement c’est un tableau, mais pour un lecteur d’écran, il n’y a ni titre ni en-tête : que des cases. À droite, trois changements. Un, la balise caption donne un titre au tableau, c’est le critère 5.4. Deux, la première ligne passe en th, et la première colonne aussi : ce sont les en-têtes, critère 5.6. Trois, chaque th porte un attribut scope. scope égale col pour un en-tête de colonne, scope égale row pour un en-tête de ligne. C’est ça, la technique d’association du critère 5.7 : le navigateur sait maintenant que 847 appartient à la colonne Janvier et à la ligne Lyon. Pour un tableau simple, scope suffit.

Ce que la cellule annonce maintenant

Et voilà la différence à l’usage. Avec le balisage, quand l’utilisateur arrive sur la cellule 847, le lecteur d’écran ne dit plus juste un nombre. Il annonce : ligne Lyon, colonne Janvier, 847. Le titre du tableau est lu à l’entrée. La personne peut naviguer de cellule en cellule sans jamais perdre le fil, parce que chaque valeur arrive avec son contexte : sa ligne et sa colonne. C’est exactement ce que les critères 5.4, 5.6 et 5.7 rendent possible, ensemble.

Mise en page : table ou CSS ?

Maintenant le piège inverse, et c’est une erreur de dev très classique : détourner un tableau pour faire de la mise en page. Ici, une balise table place un logo et un menu, mais on lui a collé un caption et des th, comme s’il s’agissait de vraies données. Résultat : le lecteur d’écran croit à un vrai tableau, il annonce un titre, des en-têtes, des lignes et des colonnes qui n’ont aucun sens. C’est exactement ce que vise le critère 5.8 : un tableau de mise en forme ne doit porter aucune balise réservée aux données, ni caption, ni th. La vraie bonne pratique aujourd’hui, c’est de ne pas passer par un tableau du tout pour la mise en page : on la fait en CSS, avec grid ou flexbox, et on garde la balise table pour ce à quoi elle sert, présenter de vraies données.

Quand scope ne suffit plus

Un mot sur les tableaux plus compliqués. Tant que ton tableau reste simple, une ligne d’en-têtes, une colonne d’en-têtes, scope règle tout. Mais dès qu’une cellule dépend de plusieurs en-têtes à la fois, par exemple un groupe Nord qui coiffe deux trimestres, scope ne sait plus à quoi la relier. Le critère 5.7 prévoit alors une autre technique : tu poses un identifiant unique sur chaque en-tête, puis sur la cellule tu ajoutes un attribut headers qui liste les identifiants concernés. Sur la valeur 120, cet attribut headers pointe d’un coup vers son groupe et sa colonne : plus aucune ambiguïté. Le RGAA précise hors cas particuliers, autrement dit ne complique pas si tu n’en as pas besoin. Reste au plus simple, et n’ajoute id et headers que quand scope ne suffit vraiment plus.

Checklist

Récapitulons en cinq réflexes. D’abord, donne un titre à ton tableau avec caption : c’est le critère 5.4. Ensuite, tes en-têtes de colonne et de ligne passent en th, jamais en td, c’est le 5.6. Sur chaque en-tête, ajoute scope égale col ou scope égale row pour l’association, critère 5.7. Le duo headers et id, tu le réserves aux tableaux complexes, quand une cellule dépend de plusieurs en-têtes. Et surtout, ne détourne jamais une balise table pour faire de la mise en page : ça, c’est le critère 5.8, et la mise en page se fait en CSS. Coche ces cinq points et tu évites la grande majorité des retours d’audit sur les tableaux.

CTA

À toi de jouer. Prends un tableau important de ton site, un rapport, un tarif, un planning. Vérifie qu’il a un titre, des en-têtes en th avec scope, et qu’aucune mise en page ne se cache dans une balise table. Pour analyser une page entière et prioriser tes corrections, rendez-vous sur rgaa-checker.com.

Approfondir dans le guide

Cet épisode aborde ces critères du RGAA 4.1.2. Ouvre leur fiche pour la méthode de test détaillée, les cas particuliers et les exemples.

Passer à l’action

La vidéo pose le cadre. Pour repérer des pistes d’amélioration sur un site réel, lance une analyse ou explore le guide des 106 critères.

Analyser un site Guide RGAA