Les tableaux dans l'accessibilité

Web
Débutant

Date de parution 21 septembre 2026

Mise à jour de l'article du 15 avril 2022

Présentation générale #

Un tableau est un agencement d'informations en lignes et en colonnes contenant des cellules facilitant la comparaison et la mise en avant des données.
Il permet de présenter des informations tabulaires dans une grille en deux dimensions, ces données étant souvent plus faciles à lire sous forme de tableau.

Cela permet à un utilisateur voyant d'établir rapidement des associations visuelles entre les données du tableau et ses en-têtes.

En revanche, un utilisateur non-voyant n'aura pas accès à tous ces liens entre les informations, c'est pour cette raison qu'il est important qu'un tableau soit implémenté avec le balisage HTML approprié afin qu'il soit correctement restitué par les technologies d'assistance.

Dans la suite de cet article, nous allons voir les principales règles à respecter pour obtenir un tableau accessible.

Mettre une légende/titre à votre tableau #

Il est important de donner un titre à votre tableau. À la fois concis et pertinent, ce texte doit permettre de comprendre la nature ainsi que le type de données qu'il contient.
Il doit être associé au tableau grâce à la balise caption et doit être le premier élément après la balise d'ouverture table.

Exemple avec `caption` #


<table>
    <caption>Emploi du temps 2022</caption>
    [...]
</table>

Une autre façon de donner un titre est l'utilisation des attributs aria-labelledby ou aria-label sur la balise table, un titre doit cependant être visible.

Exemple avec `aria-label` #


<table aria-label="titre du tableau">
    [...]
</table>

En dernier recours, il est également possible d'utiliser l'attribut title. Le titre doit cependant être visible.

Exemple avec `title` #


<h2 id="titre"> Emploi du temps 2022</h2>
<table title="titre">
    [...]
</table>

Tableaux complexes : ajouter une description #

Dans le cas d'un tableau complexe, le titre doit être accompagné d'un résumé décrivant l'organisation spatiale des données.
Il est recommandé d'utiliser l'attribut ARIA aria-describedby qui permet de lier programmatiquement la description au tableau.


<p id="info-table">
exemple de description pour aider à la compréhension du tableau complexe
</p>

<table aria-describedby="info-table">
    <caption> Emploi du temps 2022 </caption>
    [...]
</table>

Identifier les en-têtes de votre tableau #

Tableaux simples : attribut scope #

Pour aider les utilisateurs de technologies d'assistance, il est impératif d'identifier les en-têtes des tableaux, que ce soit pour les lignes ou les colonnes. Pour baliser ces en-têtes, il faut utiliser la balise th, celle-ci ne doit jamais être vide.

Une fois que les en-têtes sont créés, il faut associer les cellules de données aux en-têtes dont elles dépendent.
L'attribut scope permet de lier programmatiquement les cellules aux en-têtes, et donc aux technologies d'assistance de les identifier.

<th scope="col"> pour un en-tête colonne
<th scope="row"> pour un en-tête ligne

Tableaux complexes : attributs id et headers #

Certains tableaux sont trop complexes pour identifier une association horizontale ou verticale stricte entre l'en-tête et les cellules des données (par exemple, fusion de colonnes ou de lignes ou en-têtes à plusieurs niveaux).
L'attribut scope ne permet pas de restituer cette organisation. Il faut utiliser un attribut id unique pour chaque cellule d'en-tête. Pour relier cet en-tête à une cellule, il faudra utiliser l'attribut headers en y rajoutant les id voulus.

Par exemple, supposons deux cellules d'en-têtes, <th id="toto">Toto</th> et <th id="tata">Tata</th>, le code pour la relier à une cellule de données sera <td headers="toto tata">Tota</td>.

Un tableau doit utiliser headers/id uniquement si :

Ce tableau a des en-têtes de colonnes/lignes qui changent à l'intérieur du tableau.
Une cellule de données ayant trois en-têtes ou plus associés (souvent liée à des cellules d'en-têtes qui sont fusionnées)

Cas particuliers des tableaux de mise en forme #

Dans la mesure du possible, évitez d'utiliser des tableaux pour faire de la mise en page. Les tableaux sont faits pour présenter des données tabulaires avant tout et les styles CSS permettent de se passer de la mise en forme via des tableaux.

Si toutefois vous utilisez un tableau pour faire de la mise en page, vous devez respecter ces règles :

l'élément table doit avoir l'attribut role="presentation" ou role="none" afin de retirer la sémantique au tableau
les éléments sémantiques propres à un tableau ne doivent pas être utilisés : caption, th, scope, headers,
assurez-vous que, s'il existe un ordre de lecture spécifique pour comprendre le contenu, cet ordre est respecté lorsqu'on lit le tableau en lecture linéaire (qui suit l'ordre d'apparition dans le code).

Le fait de créer des tableaux accessibles permettra une lecture cohérente de ces données tabulaires avec un lecteur d'écran. Pour naviguer dans un tableau avec Jaws ou NVDA, il existe plusieurs raccourcis spécifiques.

NVDA #

Pour naviguer rapidement de tableau en tableau dans une page, il suffit d'utiliser sur la touche t. Si on utilise le raccourci Maj + t, on navigue dans le sens contraire et donc on revient au tableau précédent.

À l'intérieur d'un tableau, il existe plusieurs raccourcis afin de se déplacer à l'intérieur simplement :

Ctrl + Alt + flèche gauche permet de se déplacer sur la colonne de gauche tout en gardant la même ligne, Ctrl + Alt + flèche droite se déplace sur la colonne de droite.
Ctrl + Alt + flèche bas permet de passer à la ligne suivante en restant sur la même colonne, Ctrl + Alt + flèche haut pour passer à la ligne précédente.

Jaws #

Pour Jaws, il faut utiliser la touche y et Maj + y pour naviguer entre les tableaux.
Pour parcourir l'intérieur d'un tableau, il existe plusieurs raccourcis :

Insert + Ctrl + T permet de lister tous les tableaux.
Ctrl + Alt + flèche gauche permet de se déplacer sur la colonne de gauche tout en gardant la même ligne, Ctrl + Alt + flèche droite se déplace sur la colonne de droite.
Ctrl + Alt + flèche bas permet de passer à la ligne suivante en restant sur la même colonne, Ctrl + Alt + flèche haut pour passer à la ligne précédente.
Insert + Maj + flèche haut permet de lire toute la ligne.
Insert + Maj + 5 permet de lire toute la colonne.

Exemples de tableaux #

Nous allons maintenant vous présenter des exemples de tableaux accessibles.

Tableau simple #

Le premier exemple est un tableau avec seulement des en-têtes sur les colonnes, nous utilisons donc l'attribut scope="col" pour que les technologies d'assistance l’interprète correctement.

Personnes avec leur activité professionnelle
Prénom	Nom	Genre	Métier
John	Doe	M	Inconnu
Marty	McFly	M	Guitariste
Ellen	Ripley	F	Astronaute
Indiana	Jones	M	Archéologue
Sarah	Connors	F	Serveuse


<table class="table">
 <caption class="h4"> Personnes avec leur activité professionnelle</caption>
  <tr>
    <th scope="col">Prénom</th>
    <th scope="col">Nom</th>
    <th scope="col">Genre</th>
    <th scope="col">Métier</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>M</td>
    <td>Inconnu</td>
  </tr>
  [...]

De cette manière, il est possible de naviguer facilement au sein du tableau à l'aide d'un lecteur d'écran, tout changement de cellule (d'une colonne, ou d'une ligne à l'autre) étant restitué avec l'en-tête associé.

Par exemple, si on est positionné sur la colonne "Prénom" et qu'on utilise le raccourci Ctrl + Alt + flèche droite pour passer à la colonne "Nom", NVDA vocalise "Nom Colonne 2 + texte de la colonne".

Tableau à double en-tête #

Dans ce deuxième exemple, le tableau est un emploi du temps permettant de savoir rapidement si le magasin est ouvert ou fermé, en fonction du jour de la semaine et de l'heure.

Ce tableau nécessite deux en-têtes, un en-tête de colonne pour les jours de la semaine et un en-tête de ligne pour le créneau horaire.

Ouverture du magasin de jouets
	Lundi	Mardi	Mercredi	Jeudi	Vendredi
09:00 - 11:00	Fermé	Ouvert	Ouvert	Ouvert	Fermé
11:00 - 13:00	Ouvert	Ouvert	Ouvert	Ouvert	Fermé
13:00 - 15:00	Ouvert	Ouvert	Fermé	Ouvert	Ouvert
15:00 - 17:00	Ouvert	Ouvert	Fermé	Ouvert	Ouvert


<table class="table">
 <caption class="h4">Ouverture du magasin de jouets</caption>
  <tr>
    <td></td>
    <th scope="col">Lundi</th>
    <th scope="col">Mardi</th>
    <th scope="col">Mercredi</th>
    <th scope="col">Jeudi</th>
    <th scope="col">Vendredi</th>
  </tr>
  <tr>
    <th scope="row">09:00 - 11:00</th>
    <td>Fermé</td>
    <td>Ouvert</td>
    <td>Ouvert</td>
    <td>Fermé</td>
    <td>Fermé</td>
  </tr>
  [...]

Tableau complexe #

Dans cet exemple, certaines cellules données ont trois en-têtes associés, il faut donc utiliser les attributs id et headers.

Comme le tableau est complexe, on peut ajouter une description afin d'aider les utilisateurs à comprendre la nature et la structure du tableau.

Tableaux permettant de calculer le taux de conformité d'un site internet.
Pour chaque page auditée, les critères peuvent être conformes, non-conformes ou non-applicables et sont répartis selon deux niveaux de difficultés : Débutant ou Confirmé

Synthèse par niveaux
Critères	Conformes		Non-conformes		Non-applicables		Taux de conformité
Niveau	Débutant	Confirmé	Débutant	Confirmé	Débutant	Confirmé	Taux de conformité
Accueil	17	13	0	0	13	7	100%
Article	17	12	0	1	13	7	97%


<p class="border-top border-light" id="tblDesc">Description du tableau</p>
<table aria-describedby="tblDesc" class="table">
 <caption class="visually-hidden position-relative">Synthèse par niveaux</caption>
 <tr>
    <th id="critere">Critères</th>
    <th id="conforme" headers="critere" colspan="2">Conformes</th>
    [...]
  </tr>
  <tr>
    <th id="niveau">Niveau</th>
    <th id="debutant-conforme" headers="niveau conforme">Débutant</th>
    <th id="confirme-conforme" headers="niveau conforme">Confirmé</th>
    [...]
  </tr>
  <tr>
    <th id="accueil">Accueil</th>
    <td headers="accueil conforme debutant-conforme">17</td>
    <td headers="accueil conforme confirme-conforme">13</td>
    [...]
  </tr>
  [...]