Composant accessible · outil gratuit

Tableau de données accessible : titre, en-têtes et scope, code vérifié

Un tableau de données accessible a un titre relié (<caption>), des en-têtes déclarés avec <th> et, quand il a des en-têtes de colonnes et de lignes, l'attribut scope (col ou row) sur chacun. Le lecteur d'écran annonce alors les en-têtes avec chaque valeur : « Mardi, Après-midi : Fermé ».

Critères RGAA 4.1.2 : 5.4, 5.6, 5.7, 5.8 · WCAG 2.2 : 1.3.1 · mis à jour le 2 novembre 2026.

Générer et vérifier le composant

Réglez le composant : le code se met à jour, l'aperçu fonctionne pour de vrai, et chaque version est vérifiée en direct par les contrôles du composant, un test de comportement et axe-core. « Introduire une erreur fréquente » montre ce que chaque contrôle détecte ; « Tester mon code » vérifie le vôtre.

Réglages

Titre du tableau

En-têtes de colonnes (séparés par des virgules)

Lignes (valeurs séparées par des virgules, une ligne par ligne)

La première colonne contient des en-têtes de lignes

Introduire une erreur fréquente

Pour voir le contrôle qui la détecte (les erreurs de comportement apparaissent avec « Tester le comportement »).

<table class="tableau">
  <caption>Horaires d'ouverture</caption>
  <thead>
    <tr><th scope="col">Jour</th><th scope="col">Matin</th><th scope="col">Après-midi</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Lundi</th><td>9 h – 12 h</td><td>14 h – 18 h</td></tr>
    <tr><th scope="row">Mardi</th><td>9 h – 12 h</td><td>Fermé</td></tr>
    <tr><th scope="row">Samedi</th><td>10 h – 13 h</td><td>Fermé</td></tr>
  </tbody>
</table>

Aperçu réel (utilisable à la souris et au clavier)

Vérification en direct

Qui est gêné quand le composant est mal fait

Personnes aveugles : sans en-têtes déclarés, elles entendent « Fermé » sans savoir à quel jour ni à quelle demi-journée il correspond.
Personnes malvoyantes qui utilisent une loupe : elles ne voient qu'une partie du tableau : un titre et des en-têtes clairs les aident à se repérer.

Le comportement attendu

Au clavier

Touche ou moment	Ce qui doit se passer
Tab	Un tableau de données n'est pas interactif : Tab ne s'y arrête que sur les liens ou champs qu'il contient.
Raccourcis du lecteur d'écran	Les lecteurs d'écran proposent leurs propres touches pour aller de cellule en cellule (Ctrl+Alt+flèches avec NVDA et JAWS).

Avec un lecteur d'écran

Le lecteur d'écran annonce « tableau, Horaires d'ouverture, 4 lignes, 3 colonnes ».
En passant de cellule en cellule, il lit l'en-tête qui change avec la valeur : « Après-midi, Fermé ».

Les erreurs les plus fréquentes

Des en-têtes en <td>. La première ligne en gras avec du CSS, mais codée en cellules ordinaires.
Des en-têtes sur deux axes sans scope. Le lecteur d'écran peut associer la mauvaise ligne ou la mauvaise colonne.
Un titre au-dessus, non relié. Un <h3> ou un paragraphe au-dessus du tableau n'est pas annoncé avec lui (critère 5.4).
Un tableau de données déclaré de mise en forme. role="presentation" efface les en-têtes pour les technologies d'assistance.
Des cellules fusionnées sans nécessité. colspan et rowspan rendent le tableau complexe : un résumé devient nécessaire (critère 5.1).

Tester soi-même

Avec un lecteur d'écran, entrez dans le tableau : le titre et ses dimensions doivent être annoncés.
Déplacez-vous de cellule en cellule : l'en-tête de colonne (et de ligne) doit être lu avec la valeur.
Relisez le titre : il doit dire ce que contient le tableau (critère 5.5).

Ce qu'Accessia détecte dans un audit

Accessia signale automatiquement les tableaux sans en-tête <th> et, dans les tableaux à en-têtes de lignes et de colonnes, les th sans scope (critère 5.6) ; avec le rendu navigateur, axe-core vérifie aussi les attributs scope et headers (critère 5.7). Les titres des tableaux sont relevés dans les preuves du rapport et jugés par la revue express (critère 5.5) ; les pages sans tableau de données ou de mise en forme voient les critères correspondants proposés comme non applicables.

Auditer une page gratuitement, ou vérifiez ce composant directement dans votre éditeur de code avec le serveur MCP d'Accessia.

Critères RGAA concernés

Questions fréquentes

caption est-il obligatoire ?

Non : le RGAA vérifie seulement qu'un titre existant est relié (5.4) et pertinent (5.5). Un titre reste très utile dès qu'une page compte plusieurs tableaux.

scope est-il obligatoire ?

Pas pour un tableau à une seule ligne (ou une seule colonne) d'en-têtes : le navigateur fait l'association. Il l'est quand il y a des en-têtes de lignes et de colonnes.

Et les tableaux complexes ?

Avec des en-têtes fusionnés ou sur plusieurs niveaux, il faut des id sur les th et l'attribut headers sur les cellules, plus un résumé (critères 5.1 et 5.7). Mieux vaut souvent découper en tableaux simples.

Ce code rend-il mon site conforme ?

Il rend ce tableau conforme aux contrôles affichés. Le titre et les intitulés restent à juger.