English

<caption>

Donner un titre au tableau que les lecteurs d'écran annoncent

— 1 min de lecture

  • HTML
  • accessibilité
  • sémantique
  • tableaux

<caption> — Le titre du tableau

La balise <caption> est le titre d'un <table>. Elle est placée immédiatement après la balise ouvrante <table> et décrit le contenu du tableau pour tous les utilisateurs.

Quand l'utiliser

Tu as un tableau et tu veux donner un contexte avant que l'utilisateur plonge dans les données. Préfère <caption> a un <p> place au-dessus du tableau : le <caption> est associe programmatiquement au tableau, pas juste visuellement adjacent.

Ce que tu gagnes

Accessibilité : les lecteurs d'écran annoncent le <caption> quand l'utilisateur entre dans le tableau. Sans lui, l'utilisateur decouvre le contenu du tableau cellule par cellule sans savoir de quoi il parle. Un <p> adjacent n'est pas lu automatiquement.

Exemple de code

<table>
  <caption>Browser support for the dialog element (2026)</caption>
  <thead>
    <tr>
      <th scope="col">Browser</th>
      <th scope="col">Version</th>
      <th scope="col">Support</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Chrome</td>
      <td>37+</td>
      <td>Full</td>
    </tr>
    <tr>
      <td>Firefox</td>
      <td>98+</td>
      <td>Full</td>
    </tr>
  </tbody>
</table>

Pour aller plus loin