Tableaux

Critère 5.1Chaque tableau de données complexe a-t-il un résumé ?

Ce que ça vérifie — Un tableau de données complexe (dont les en-têtes ne peuvent pas être reliés simplement aux cellules) doit fournir un résumé décrivant son organisation. Ce résumé aide les personnes utilisant un lecteur d'écran à comprendre la structure avant de parcourir les cellules.

Comment corriger — Ajoutez un résumé décrivant la façon dont les données sont organisées, par exemple via l'attribut summary ou une description textuelle associée au tableau. Réservez-le aux tableaux réellement complexes.

<table summary="Chiffre d'affaires par région (lignes) et par trimestre (colonnes).">
  <!-- ... -->
</table>

Critère 5.2Pour chaque tableau de données complexe ayant un résumé, celui-ci est-il pertinent ?

Ce que ça vérifie — Lorsqu'un résumé est présent, il doit réellement décrire l'organisation du tableau et non son contenu ou son apparence. Un résumé pertinent permet d'anticiper la structure des données.

Comment corriger — Rédigez un résumé qui explique comment lire le tableau (nature des lignes et des colonnes, regroupements), sans répéter les données ni le titre.

<!-- À éviter --> summary="Tableau des ventes"
<!-- Recommandé --> summary="Chaque ligne correspond à un produit, chaque colonne à un mois de l'année."

Critère 5.3Pour chaque tableau de mise en forme, le contenu linéarisé reste-t-il compréhensible ?

Ce que ça vérifie — Un tableau utilisé uniquement pour la mise en forme doit rester compréhensible une fois linéarisé, c'est-à-dire lu cellule après cellule dans l'ordre du code. C'est cet ordre que restituent les technologies d'assistance.

Comment corriger — Vérifiez que l'ordre de lecture reste logique et privilégiez CSS (flexbox, grid) pour la mise en page. Réservez les tableaux aux données tabulaires.

Critère 5.4Pour chaque tableau de données ayant un titre, le titre est-il correctement associé au tableau de données ?

Ce que ça vérifie — Quand un tableau de données possède un titre visible, ce titre doit être programmatiquement associé au tableau pour que les technologies d'assistance l'annoncent. Sans association, le lien entre titre et tableau est perdu.

Comment corriger — Utilisez l'élément <caption> placé juste après la balise <table>, ou à défaut associez le titre via aria-labelledby pointant vers l'identifiant du texte.

<table>
  <caption>Résultats du premier trimestre 2026</caption>
  <!-- ... -->
</table>

Critère 5.5Pour chaque tableau de données ayant un titre, celui-ci est-il pertinent ?

Ce que ça vérifie — Le titre associé au tableau doit décrire fidèlement son contenu afin de renseigner l'utilisateur sur la nature des données. Un titre pertinent facilite le repérage et la compréhension.

Comment corriger — Rédigez un <caption> concis et informatif qui résume le sujet du tableau, sans le confondre avec le résumé de structure.

<caption>Effectifs par service et par année (2024-2026)</caption>

Critère 5.6Pour chaque tableau de données, chaque en-tête de colonne et chaque en-tête de ligne sont-ils correctement déclarés ?

Ce que ça vérifie — Chaque en-tête de colonne et de ligne doit être déclaré avec l'élément approprié pour que les cellules de données soient correctement annoncées. Sans en-têtes déclarés, la lecture au lecteur d'écran devient une suite de valeurs sans contexte.

Comment corriger — Utilisez <th> pour les cellules d'en-tête et précisez leur portée avec scope="col" (en-tête de colonne) ou scope="row" (en-tête de ligne).

<tr>
  <th scope="col">Produit</th>
  <th scope="col">Prix</th>
</tr>
<tr>
  <th scope="row">Clavier</th>
  <td>29 €</td>
</tr>

Critère 5.7Pour chaque tableau de données, la technique appropriée permettant d’associer chaque cellule avec ses en-têtes est-elle utilisée (hors cas particuliers) ?

Ce que ça vérifie — Chaque cellule de données doit être reliée à ses en-têtes par la technique adaptée à la complexité du tableau. Cette association permet aux technologies d'assistance de restituer le bon contexte pour chaque valeur.

Comment corriger — Pour un tableau simple, utilisez scope="col"/scope="row" sur les <th>. Pour un tableau complexe (en-têtes fusionnés ou multiples), utilisez les attributs id sur les <th> et headers sur les <td> pour lier explicitement chaque cellule à ses en-têtes.

<th id="t1">2025</th>
<th id="ca">CA</th>
<!-- ... -->
<td headers="t1 ca">120 000 €</td>

Critère 5.8Chaque tableau de mise en forme ne doit pas utiliser d’éléments propres aux tableaux de données. Cette règle est-elle respectée ?

Ce que ça vérifie — Un tableau de mise en forme ne doit pas contenir d'éléments réservés aux tableaux de données, sous peine de créer une structure de données fictive. Les technologies d'assistance annonceraient alors des relations trompeuses.

Comment corriger — Retirez tout <caption>, <th>, summary, scope, headers ou role de tableau du tableau de mise en forme, et ajoutez si besoin role="presentation". Mieux : remplacez la mise en page par CSS.

<!-- À éviter --> <table><th>...</th></table>
<!-- Recommandé --> <table role="presentation"><tr><td>...</td></tr></table>