Pour chaque tableau de données ayant un titre, le titre est-il correctement associé au tableau de données ?
Un utilisateur de lecteur d’écran navigue de tableau en tableau avec la touche « T » sur NVDA. À chaque arrêt, le lecteur annonce le titre du tableau. Si ce titre existe visuellement mais n’est pas correctement associé au code, le lecteur dit « tableau à 3 colonnes » — et l’utilisateur doit parcourir les en-têtes pour comprendre de quoi il s’agit.
Ce critère ne s’applique que si un titre est présent. Quatre techniques valident l’association : un élément <caption>, un attribut title sur la balise <table>, un attribut aria-label, ou un aria-labelledby qui pointe vers un passage de texte existant dans la page. Le titre doit être lié au tableau, pas juste placé à côté.
<caption> est la technique à privilégier. Elle est native, visible par défaut, et lue correctement par tous les lecteurs d’écran courants. Si le tableau n’a aucun titre, le critère est non applicable — pas non conforme.
Un test pour confirmer que chaque tableau de données possède un titre
Association programmatique du titre d'un tableau de données
- Repérez tous les tableaux de données de la page qui ont un titre (visible ou annoncé par un lecteur d’écran).
- Pour chaque titre, vérifiez qu’il est transmis au tableau via l’une de ces quatre techniques :
<caption>comme premier enfant de<table>- Attribut
titlesur la balise<table> - Attribut
aria-labelsur la balise<table> - Attribut
aria-labelledbysur<table>référençant l’idd’un élément existant dans la page
- Tous les titres sont associés via l’une de ces techniques : test validé. Au moins un titre existe visuellement sans association programmatique (ex. : un
<p>ou<h2>précédant le tableau sansaria-labelledby) : test non validé.
Exemples
❌ Non conforme : Titre dans un paragraphe non associé au tableau
<p>Ventes par région, T3 2025</p>
<table>
<thead>
<tr>
<th scope="col">Région</th>
<th scope="col">Ventes</th>
<th scope="col">Objectif</th>
</tr>
</thead>
<tbody>
<tr>
<td>Nord</td>
<td>142 000 €</td>
<td>130 000 €</td>
</tr>
</tbody>
</table>Le titre existe visuellement, mais le tableau ne sait pas qu’il lui appartient. Un lecteur d’écran annoncera « tableau à 3 colonnes » sans mentionner le titre. L’utilisateur qui navigue de tableau en tableau n’a aucun contexte avant de commencer à lire les cellules.
✅ Conforme : Titre associé avec <caption>
<table>
<caption>Ventes par région, T3 2025</caption>
<thead>
<tr>
<th scope="col">Région</th>
<th scope="col">Ventes</th>
<th scope="col">Objectif</th>
</tr>
</thead>
<tbody>
<tr>
<td>Nord</td>
<td>142 000 €</td>
<td>130 000 €</td>
</tr>
</tbody>
</table><caption> lie le titre au tableau nativement. Le lecteur d’écran annonce « Ventes par région, T3 2025, tableau à 3 colonnes » dès que l’utilisateur atterrit dessus. Aucun attribut supplémentaire requis.
✅ Conforme : Titre dans un heading associé via aria-labelledby
<h2 id="titre-ventes">Ventes par région, T3 2025</h2>
<table aria-labelledby="titre-ventes">
<thead>
<tr>
<th scope="col">Région</th>
<th scope="col">Ventes</th>
<th scope="col">Objectif</th>
</tr>
</thead>
<tbody>
<tr>
<td>Nord</td>
<td>142 000 €</td>
<td>130 000 €</td>
</tr>
</tbody>
</table>Quand la mise en page impose un heading visible comme titre de section contenant le tableau, aria-labelledby crée l’association programmatique. Le lecteur d’écran annonce le même titre. Cette technique est explicitement valide selon le test 5.4.1.
Astuces et pièges
⚠️ Le <p> ou <h2> avant le tableau ne suffit pas
C’est l’erreur la plus fréquente en audit : un titre visuellement correct, mais sans lien programmatique avec le tableau. Un <p>Résultats T3</p> suivi d’un <table> sans aria-labelledby échoue au test 5.4.1. Le lecteur d’écran ne devine pas la proximité visuelle.
⚠️ Pas de titre ? Critère non applicable
Si un tableau de données n’a aucun titre, le critère 5.4 est non applicable (NA), pas non conforme. En revanche, donner un titre à chaque tableau reste une bonne pratique : sans lui, les lecteurs d’écran restituent souvent la première ligne d’en-tête, ce qui est rarement suffisant pour identifier le tableau lors d’une navigation rapide.
💡 <caption> doit être le premier enfant de <table>
La spécification HTML impose que <caption> soit placé immédiatement après la balise ouvrante <table>, avant tout <thead>, <tbody> ou <tr>. Un <caption> déplacé ailleurs dans la structure est invalide et peut ne pas être restitué correctement par certains lecteurs d’écran.
⚠️ L’attribut title sur <table> : valide mais invisible
Le RGAA accepte title sur <table> comme technique valide. Contrairement à <caption>, ce titre n’est pas affiché visuellement — seuls les lecteurs d’écran y accèdent. Si le titre doit être visible pour tous les utilisateurs, <caption> ou aria-labelledby sont nettement préférables.
⚠️ aria-labelledby silencieux quand l’id est absent
Un aria-labelledby qui pointe vers un id inexistant ou mal orthographié ne produit aucune erreur visible — il est simplement ignoré. Le tableau se retrouve sans titre restitué, et le test échoue sans alerte. Vérifiez toujours que l’id cible existe dans le DOM au moment du rendu.
Questions fréquentes
Pourquoi un tableau de données sans titre est-il non conforme au RGAA ?
Non. Le critère 5.4 est conditionnel : il ne s’applique que si un titre est présent. Un tableau sans titre est noté NA (non applicable), pas NC. C’est le critère 5.3 qui évalue si les tableaux de données disposent d’en-têtes — une question distincte.
Quand un <h2> placé avant le tableau suffit-il comme titre valide en RGAA ?
Oui, à condition d’ajouter aria-labelledby sur <table> avec la valeur de l’id du heading. Sans cela, le lien visuel n’existe pas programmatiquement et le test 5.4.1 échoue. Avec aria-labelledby correctement renseigné, c’est une technique valide selon le RGAA.
Comment auditer le critère RGAA 5.4 sur les titres de tableaux de données ?
Inspectez chaque <table> dans les outils de développement : cherchez un <caption>, un title, un aria-label ou un aria-labelledby valide. Avec NVDA, naviguez avec la touche « T » : le lecteur doit annoncer un titre explicite pour chaque tableau qui en possède un visuellement. Si NVDA annonce uniquement le nombre de colonnes, l’association est manquante.
Comment masquer <caption> avec du CSS tout en restant conforme au RGAA ?
Un masquage accessible (classe type sr-only avec clip et position: absolute) reste valide : le titre est restitué par les lecteurs d’écran. Un display: none ou visibility: hidden masque le titre à tout le monde, y compris les technologies d’assistance, ce qui invalide l’association et fait échouer le test.