Un tableau de résultats sportifs, un comparatif de tarifs, un planning hebdomadaire : dès qu'une page affiche plusieurs tableaux, un visiteur qui les parcourt vite a besoin de savoir en un coup d'œil ce que chacun raconte, sans devoir lire chaque cellule pour le deviner. Un titre visuel placé juste au-dessus du tableau, en dehors de lui, fait à peu près illusion à l'écran mais ne dit rien à un lecteur d'écran qui parcourt le document tableau par tableau.
La balise <caption> répond précisément à ce besoin. Elle donne un titre au tableau qui la contient, à l'intérieur même de la structure du tableau, ce qui la rend indissociable de lui pour toute technologie qui l'interprète.
Définition
<caption> contient le titre d'un tableau. Elle décrit en une phrase courte ce que le tableau représente, un peu à la façon dont un titre de graphique en résume le contenu. Contrairement à un titre placé au-dessus du tableau dans un simple paragraphe, <caption> fait partie intégrante de la structure du tableau lui-même.
Une place unique : premier enfant de table
La règle de placement ne souffre aucune exception : <caption>, quand elle est présente, doit être le tout premier enfant direct de <table>, avant même une éventuelle <colgroup>. Un seul <caption> est autorisé par tableau. Placée ailleurs, elle perd sa validité et cesse d'être reconnue comme le titre du tableau par les technologies d'assistance.
<table>
<caption>
Ventes du premier trimestre par région
</caption>
<thead>
<tr>
<th>Région</th>
<th>Ventes</th>
</tr>
</thead>
<tbody>
<tr>
<td>Nord</td>
<td>12 400 €</td>
</tr>
</tbody>
</table>Le navigateur affiche par défaut ce titre centré au-dessus du tableau, mais son positionnement visuel se personnalise entièrement en CSS. Ce qui ne change jamais, c'est sa place dans le code : toujours en tête, jamais ailleurs.
Pourquoi c'est important pour l'accessibilité
Un lecteur d'écran qui rencontre un tableau annonce généralement son titre avant même de commencer à énoncer ses en-têtes de colonnes ou ses cellules. L'utilisateur sait donc à quoi s'attendre avant d'entrer dans le détail du tableau, exactement comme un visiteur voyant qui lit d'abord un titre avant de parcourir des lignes et des colonnes.
Sans <caption>, un lecteur d'écran annonce un tableau sans aucun contexte : « tableau, 4 colonnes, 12 lignes », sans dire de quoi il s'agit. L'utilisateur doit alors parcourir plusieurs cellules avant de comprendre le sujet, ce qu'un titre annoncé en premier évite entièrement.
caption et legend, le même rôle pour deux conteneurs
<legend> joue exactement le même rôle que <caption>, mais pour un conteneur différent. <legend> titre un groupe de champs de formulaire, tandis que <caption> titre un tableau de données. Les deux balises partagent la même contrainte de position, en tout début de leur conteneur, et la même vocation, donner un sens global à un ensemble avant d'en détailler le contenu.
| Balise | Conteneur | Rôle |
|---|---|---|
<caption> | <table> | Titre du tableau de données |
| <legend> | fieldset | Titre d'un groupe de champs de formulaire |
Questions fréquentes
caption par un simple titre h3 au-dessus du tableau ?Techniquement oui, mais ce n'est pas équivalent pour l'accessibilité. Un titre placé hors du tableau n'est associé à lui que visuellement, par sa proximité à l'écran. <caption>, elle, crée une association structurelle explicite que les technologies d'assistance reconnaissent automatiquement, sans dépendre de la mise en page.
caption avec du CSS sans casser sa fonction ?Oui, entièrement. La position visuelle, la couleur, la taille de police, l'alignement peuvent tous être modifiés en CSS sans que la balise perde son rôle sémantique. Ce que le style change, c'est l'apparence à l'écran, pas la place de <caption> dans le code ni ce qu'elle annonce à une technologie d'assistance.
caption n'est pas le premier enfant de table ?Le navigateur corrige souvent l'erreur en silence en déplaçant l'élément, ou l'ignore purement et simplement selon les cas, ce qui rend le comportement imprévisible d'un moteur à l'autre. Le résultat le plus sûr reste de toujours écrire <caption> en tout premier, immédiatement après la balise ouvrante <table>.