HTML Academy · Leçon

Accessibilité des tableaux : scope, summary et caption

Ajoutez des légendes et des attributs scope pour faciliter l’utilisation par les lecteurs d’écran.

Accessibilité des tableaux : scope, summary et caption est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.

Pourquoi l’accessibilité des tableaux est importante

Les utilisateurs de lecteurs d’écran parcourent les tableaux de données cellule par cellule — ils ont besoin du contexte de l’en-tête pour chaque cellule de données lue.

Sans balisage approprié, les lecteurs d’écran lisent uniquement les valeurs brutes, sans contexte de colonne ni de ligne
Les tableaux accessibles rendent les données compréhensibles pour tout le monde

L’élément caption

<caption> fournit un titre visible au tableau :

<table>
  <caption>Q4 2024 Product Sales by Region</caption>
  <thead>...</thead>
  <tbody>...</tbody>
</table>
<!-- caption is the first child of table -->
<!-- Screen readers announce it when entering the table -->
<!-- Helps all users understand the table's purpose at a glance -->

Styliser caption

Stylisez et positionnez caption avec CSS :

caption {
  caption-side: bottom;  /* or top (default) */
  font-style: italic;
  font-size: 0.875rem;
  color: #666;
  text-align: left;
  padding: 0.5rem 0;
}

L’attribut scope sur th

L’attribut scope indique aux lecteurs d’écran les cellules auxquelles s’applique un en-tête :

<thead>
  <tr>
    <th scope="col">Name</th>      <!-- header for a column -->
    <th scope="col">Score</th>
    <th scope="col">Grade</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">Alice</th>    <!-- header for a row -->
    <td>95</td>
    <td>A</td>
  </tr>
</tbody>

Valeurs de scope

Valeurs de l’attribut scope :

col — l’en-tête s’applique aux cellules de la même colonne
row — l’en-tête s’applique aux cellules de la même ligne
colgroup — l’en-tête s’applique aux cellules d’un groupe de colonnes
rowgroup — l’en-tête s’applique aux cellules d’un groupe de lignes (tbody/thead)

scope pour les en-têtes complexes

Les en-têtes fusionnés utilisent la portée colgroup ou rowgroup :

<thead>
  <tr>
    <th rowspan="2" scope="col">Name</th>
    <th colspan="2" scope="colgroup">2024</th>   <!-- colgroup -->
  </tr>
  <tr>
    <th scope="col">Q1</th>
    <th scope="col">Q2</th>
  </tr>
</thead>

L’attribut headers sur td

Pour les tableaux très complexes, utilisez headers afin de relier explicitement les cellules à leurs en-têtes :

<thead>
  <tr>
    <th id="hname">Name</th>
    <th id="hq1">Q1</th>
    <th id="hq2">Q2</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th id="ralice" headers="hname">Alice</th>
    <td headers="hq1 ralice">95</td>
    <td headers="hq2 ralice">88</td>
  </tr>
</tbody>

Quand utiliser scope ou headers

Recommandations :

Tableaux simples avec des en-têtes sur une seule ligne → utilisez scope="col" et scope="row"
En-têtes complexes fusionnés → utilisez l’attribut headers avec des références d’ID
WCAG 1.3.1 exige que les en-têtes des tableaux soient associés programmatiquement à leurs cellules de données

aria-label sur un tableau

Lorsque caption n’est pas souhaitable visuellement, utilisez aria-label :

<!-- caption with visually-hidden class -->
<table aria-label="Q4 2024 Product Sales by Region">
  ...
</table>
<!-- Or use aria-labelledby to reference a heading -->
<h2 id="table-title">Sales Data</h2>
<table aria-labelledby="table-title">...</table>

Tester l’accessibilité des tableaux

Comment vérifier que votre tableau est accessible :

Utilisez le panneau Tableaux du lecteur d’écran (VoiceOver, NVDA)
Installez l’extension de navigateur axe DevTools
Exécutez pa11y CLI sur l’URL de votre page
Le validateur de balisage du W3C détecte l’absence de caption

Attribut summary (obsolète)

L’attribut summary était utilisé par les lecteurs d’écran pour les tableaux complexes — il est désormais obsolète en HTML5 :

<!-- Old HTML 4.01 — do not use: -->
<table summary="This table shows quarterly sales...">

<!-- Modern HTML5 replacement: -->
<table>
  <caption>This table shows quarterly sales...</caption>
</table>
<!-- Or: aria-describedby to a paragraph -->

Liste de contrôle pour les tableaux accessibles

Liste de contrôle de l’accessibilité des tableaux de données :

Utilisez <caption> pour donner un titre au tableau
Utilisez <th> pour toutes les cellules d’en-tête
Ajoutez scope à tous les éléments <th>
Utilisez <thead>, <tbody>, <tfoot> pour structurer le tableau
Pour les tableaux complexes, utilisez id + headers

Vérification rapide

Quelle valeur de scope devez-vous utiliser pour un th qui est l’en-tête d’une colonne entière ?

Récapitulatif : accessibilité des tableaux

Notions essentielles des tableaux accessibles :

<caption> — titre visible du tableau, annoncé par les lecteurs d’écran
scope="col" — en-tête de colonne
scope="row" — en-tête de ligne
scope="colgroup/rowgroup" — en-têtes fusionnés
id + headers — pour les en-têtes complexes à plusieurs niveaux
Testez avec axe, pa11y ou VoiceOver

Questions Fréquemment Posées

La leçon « Accessibilité des tableaux : scope, summary et caption » est-elle gratuite ?

Oui — le texte complet de « Accessibilité des tableaux : scope, summary et caption » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Accessibilité des tableaux : scope, summary et caption » ?

Ajoutez des légendes et des attributs scope pour faciliter l’utilisation par les lecteurs d’écran. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer HTML Academy ?

Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Accessibilité des tableaux : scope, summary et caption » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?

Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

table, tr, td et th
Structure thead, tbody et tfoot
colspan et rowspan pour fusionner des cellules
Accessibilité des tableaux : scope, summary et caption

← Retour à HTML Academy