Tableaux de données accessibles : en-têtes, scope et caption

Distinguer tableau de données et tableau de mise en page

Un tableau de données présente des informations organisées en lignes et colonnes qui ont un sens les unes par rapport aux autres : un planning, un comparatif tarifaire, un relevé. À l'inverse, utiliser un tableau pour positionner des éléments à l'écran est une pratique à abandonner : le critère 5.3 du RGAA impose qu'un tel tableau de présentation reste compréhensible une fois linéarisé, et le critère 5.1 demande de signaler qu'il ne véhicule pas de relations de données. Aujourd'hui, la mise en page se fait avec CSS (Flexbox, Grid), pas avec la balise table. Cette séparation est la première chose qu'un audit vérifie.

Des en-têtes avec la balise th et l'attribut scope

Chaque colonne ou ligne d'un tableau de données doit avoir un en-tête déclaré avec la balise th plutôt que td : c'est l'objet du critère 5.6 du RGAA. Pour un tableau simple, vous ajoutez ensuite l'attribut scope sur chaque th, avec la valeur col pour un en-tête de colonne et row pour un en-tête de ligne (critère 5.7). Cette association explicite permet au lecteur d'écran d'annoncer l'en-tête correspondant avant de lire la valeur d'une cellule. C'est cette mécanique qui rend une donnée isolée intelligible.

Un titre clair avec la balise caption

Tout tableau de données doit posséder un titre, fourni par la balise caption placée juste après l'ouverture de la balise table. Le critère 5.4 du RGAA exige sa présence et le critère 5.5 demande qu'il soit pertinent, c'est-à-dire qu'il décrive réellement le contenu du tableau. Un titre comme Tableau 1 n'apporte rien : préférez une formulation qui résume le sujet et la période concernés. Ce titre profite à tout le monde, pas seulement aux utilisateurs de technologies d'assistance.

Les tableaux complexes : en-têtes multiples

Quand une cellule dépend de plusieurs en-têtes, par exemple un tableau avec des regroupements de colonnes ou des cellules fusionnées, l'attribut scope ne suffit plus. Vous associez alors chaque cellule à ses en-têtes via les attributs id sur les balises th et headers sur les cellules de données. Cette approche, couverte par les tests du critère 5.7, est plus lourde à maintenir : dans la mesure du possible, simplifiez le tableau ou découpez-le en plusieurs tableaux simples plutôt que de multiplier les fusions de cellules.

Questions fréquentes

Quel critère WCAG concerne les tableaux de données ?

Le critère central est le 1.3.1 Information et relations, de niveau A, qui exige que la structure logique d'un contenu (ici la relation entre cellules et en-têtes) soit transmise de manière programmatique. Le RGAA décline cette exigence dans sa thématique 5, consacrée aux tableaux.

Faut-il toujours mettre un attribut scope sur les th ?

Pour un tableau simple dont les en-têtes tiennent sur une seule ligne ou une seule colonne, l'attribut scope est fortement recommandé et attendu par le RGAA. Seuls les cas où les en-têtes sont parfaitement non ambigus peuvent s'en passer, mais l'ajouter systématiquement reste la pratique la plus sûre.

Peut-on encore utiliser un tableau pour la mise en page ?

C'est à éviter. Si un ancien code l'impose encore, le RGAA demande qu'il n'utilise aucun élément propre aux tableaux de données (ni th, ni caption, ni summary) et qu'il reste compréhensible une fois linéarisé. La solution durable est de migrer la mise en page vers CSS.

Où placer la balise caption dans le code ?

La balise caption doit être le tout premier élément à l'intérieur de la balise table, avant les lignes. Visuellement, elle s'affiche par défaut au-dessus du tableau, mais vous pouvez la repositionner ou la masquer visuellement tout en la gardant accessible si la maquette l'exige.

Comment savoir si mes tableaux sont vraiment accessibles ?

Au-delà de la présence des balises, il faut vérifier que les associations cellules / en-têtes sont correctes, surtout sur les tableaux complexes. Notre diagnostic gratuit repère les tableaux sans th, sans caption ou aux en-têtes mal reliés, et un audit complet confirme leur restitution réelle dans un lecteur d'écran.