Chaque tableau de données est-il accompagné d'un titre qui lui est clairement rattaché ?
Critère officiel 5.4 — Pour chaque tableau de données ayant un titre, le titre est-il correctement associé au tableau de données ?
Pourquoi c'est important
Un titre flottant au-dessus d'un tableau, non rattaché techniquement, n'est pas annoncé par le logiciel de lecture comme le titre de ce tableau. La personne aveugle ne sait pas quel tableau elle est en train de lire, surtout si la page en contient plusieurs.
Exemples concrets
Ce qui est conforme
Le tableau du planning des permanences des élus porte le titre « Permanences des élus — 1er trimestre 2025 », publié via la légende du bloc Tableau WordPress. Le logiciel de lecture l'annonce au moment où il atteint le tableau.
Ce qui pose problème
Le même tableau est précédé d'un titre en gras dans un paragraphe séparé. Visuellement, il semble être le titre du tableau — mais techniquement, rien ne les relie. Le logiciel de lecture ne fait pas le lien.
Comment agir
Dans WordPress, utilisez le champ « Légende » du bloc Tableau pour saisir le titre — c'est la seule méthode qui relie techniquement le titre au tableau. Un titre écrit dans un paragraphe séparé juste au-dessus ne suffit pas, même s'il est visuellement identique.
Règles clés
- Utiliser <caption> comme premier enfant de <table>.
- Alternative : aria-labelledby sur <table> pointant vers un titre adjacent.
- Le <caption> est visible par défaut — le cacher avec display:none le masque aussi aux AT.
Erreurs fréquentes
- Titre dans un <h3> au-dessus du tableau sans aria-labelledby
- Absence totale de titre pour un tableau de données
- <caption> vide
Exemples de code
titre non associé
✗ Non conforme<h3>Résultats des ventes 2024</h3>
<table><!-- données --></table>Le <h3> n'est pas associé au tableau. Annoncé comme titre de section, pas comme titre du tableau.
titre associé via caption
✓ Conforme<table>
<caption>Résultats des ventes 2024</caption>
<thead>
<tr>
<th scope="col">Région</th>
<th scope="col">CA (k€)</th>
</tr>
</thead>
<!-- ... -->
</table><caption> est le premier enfant de <table>. Annoncé : 'Résultats des ventes 2024, tableau de 2 colonnes'.
Référence WCAG : 1.3.1