Tableaux

Mots-clés

• Tableau : un élément structuré permettant d’afficher des données en lignes et en colonnes, pour des besoins d’organisation et de comparaison.
• Ligne : un groupement horizontal de cellules dans un tableau.
• Colonne : un groupement vertical de cellules dans un tableau.
• Cellule : l’unité de base d’un tableau, située à l’intersection d’une ligne et d’une colonne, contenant une donnée.
• En-tête : une ligne et/ou une colonne (généralement la première) qui aide les utilisateurs à comprendre la structure des données tabulaires.
• Portée (Scope) : la relation entre un en-tête et les données qu’il décrit.
• Légende (Caption) : un titre ou une courte description de l’ensemble du tableau, offrant une vue d’ensemble de son contenu ou de son objectif.
• Résumé (Summary) : une explication plus détaillée (visible ou programmatique) de ce que contient le tableau et de la manière de l’interpréter — particulièrement utile pour les tableaux complexes.

Décomposition des composants

Structure HTML

Conteneur

La balise <table> est utilisée pour représenter des données dans un tableau bidimensionnel, composé de lignes et de colonnes de cellules contenant des informations.

En-tête

Il est essentiel de définir les cellules d’en-tête avec des balises <th>. Ces cellules identifient le contenu des colonnes ou des lignes. En utilisant l’attribut scope, les cellules d’en-tête peuvent être associées aux cellules de données correspondantes.

• Pour les en-têtes de colonnes, utilisez scope="col".
• Pour les en-têtes de lignes, utilisez scope="row".

Lignes de tableau et cellule de données

Les lignes d’un tableau sont définies à l’aide des balises <tr>, qui regroupent les cellules individuelles en lignes horizontales. À l’intérieur de chaque ligne :

• Les cellules d’en-tête, <th>, servent à fournir un libellé pour les lignes ou les colonnes.
• Les cellules de données, <td>, contiennent chacune une donnée du tableau.

Sections du tableau

Pour améliorer encore la clarté et la structure, un tableau peut être divisé en trois sections principales :

• <thead> : englobe les lignes d’en-tête du tableau.
• <tbody> : englobe les lignes du corps du tableau (les données principales).
• <tfoot> : englobe, de manière optionnelle, les lignes en pied de tableau, comme les totaux ou les valeurs récapitulatives.

Légende (Caption)

Les tableaux incluent généralement un élément <caption> pour fournir un court titre ou une brève explication de l’objectif du tableau. Il doit être placé immédiatement après la balise ouvrante <table>. Cela aide les utilisateurs à décider s’ils doivent consulter le reste du contenu du tableau ou le passer.

<table>
  <caption>Liste de produits disponibles</caption>
  <!-- Table content -->
</table>

<table>
  <caption>Liste de produits disponibles</caption>
  <!-- Table content -->
</table>

Résumé

La balise <caption> peut être davantage exploitée pour intégrer un résumé décrivant la composition du tableau, ce qui est particulièrement utile pour les tableaux complexes.
À défaut, l’attribut aria-describedby peut être utilisé pour associer un résumé au tableau.

<table>
  <caption>
    Vue d'ensemble du budget anuel<br>
    <span>Ce tableau présente les budgets départementaux pour l'exercice 2024. La première colonne liste les départements. L'en-tête s'étend sur deux lignes : la première ligne regroupe les colonnes relatives au budget, tandis que la seconde distingue les montants alloués et dépensés. La dernière colonne indique l'écart entre les budgets alloués et dépensés. Chaque ligne de données correspond à un département et contient le détail de son budget.</span>
  </caption>

<table>
  <caption>
    Vue d'ensemble du budget anuel<br>
    <span>Ce tableau présente les budgets départementaux pour l'exercice 2024. La première colonne liste les départements. L'en-tête s'étend sur deux lignes : la première ligne regroupe les colonnes relatives au budget, tandis que la seconde distingue les montants alloués et dépensés. La dernière colonne indique l'écart entre les budgets alloués et dépensés. Chaque ligne de données correspond à un département et contient le détail de son budget.</span>
  </caption>

Scope

L’utilisation de l’attribut scope sur les éléments <th> est souvent non indispensable dans les tableaux simples, car les navigateurs et technologies d’assistance peuvent généralement déduire si une cellule d’en-tête s’applique à une ligne ou à une colonne. Cependant, l’ajout de scope peut renforcer la fiabilité, en particulier pour certaines technologies d’assistance qui peinent parfois à faire ces déductions correctement.
Dans les tableaux plus complexes, définir explicitement scope devient plus important pour clarifier les relations entre en-têtes et cellules de données.

Fusion de colonnes et de lignes

Lorsque la structure d’un tableau inclut des cellules fusionnées à l’aide de colspan ou rowspan, il peut devenir difficile pour les lecteurs d’écran de déterminer la relation entre les cellules d’en-tête et chaque cellule de données.
Ces complexités structurelles nuisent à l’accessibilité, car elles perturbent les associations horizontales et verticales habituelles. Il est donc préférable de simplifier la présentation en divisant un grand tableau en plusieurs tableaux plus petits, regroupés de manière logique. Sinon, l’approche recommandée consiste à utiliser les attributs id et headers afin de créer des liens programmatiques clairs entre chaque cellule de données et les cellules d’en-tête qui lui correspondent.

Cellules vides

Pour les cellules vides ou les cellules contenant un élément non textuel, ajoutez un <span> avec la classe “sr-only”, contenant un texte pertinent qui pourra être vocalisé par les lecteurs d’écran.

<td>
    <span class="sr-only">Non applicable</span>
</td>

<td>
    <span class="sr-only">Non applicable</span>
</td>

Attributs ARIA

Les balises et attributs HTML natifs doivent être utilisés autant que possible — ils sont automatiquement accessibles lorsqu’ils sont correctement structurés.
Cependant, les attributs ARIA peuvent également être utilisés pour une mise en page de tableau personnalisée. Pour garantir une structure sémantique correcte et un bon support des technologies d’assistance lors de la création de tableaux personnalisés, certains rôles et attributs ARIA doivent être appliqués de manière systématique.

• Le conteneur du tableau porte l’attribut role="table".
• Chaque conteneur de ligne porte l’attribut role="row" et est soit un descendant direct dans le DOM de l’élément de tableau, soit un élément appartenant à un conteneur ayant le rôle role="rowgroup".
• Chaque cellule est soit un descendant DOM d’un élément de ligne, soit lui est associée, et possède l’un des rôles suivants :
  • role="columnheader" si la cellule contient un titre ou une information d’en-tête pour la colonne ;
  • role="rowheader" si la cellule contient un titre ou une information d’en-tête pour la ligne ;
  • role="cell" si la cellule ne contient aucune information d’en-tête de ligne ou de colonne.
• Les attributs aria-label, aria-labelledby et aria-describedby peuvent être utilisés pour fournir un libellé, une légende ou une description liés au tableau.

Fonctionnalités spécifiques

Les tableaux peuvent intégrer plusieurs fonctionnalités afin de permettre aux utilisateurs d’interagir avec les données qu’ils présentent.

Tableaux triables

• Trier le contenu de chaque colonne, par ordre croissant ou décroissant.
• Inclure un indicateur visuel (par exemple « ▼ » et « ▲ ») dans les en-têtes de chaque colonne triable, généralement masqué aux technologies d’assistance à l’aide de aria-hidden="true".
• Le texte d’en-tête des colonnes triables est encapsulé dans un élément <button>.
• L’attribut aria-sort est défini sur l’en-tête de la colonne actuellement triée. Sa valeur est "ascending" si les cellules de données de la colonne sont triées dans l’ordre croissant, ou "descending" si elles sont triées dans l’ordre décroissant.

Actions

• Certains tableaux offrent la possibilité de sélectionner des lignes à l’aide de cases à cocher.
• Des barres d’actions peuvent également être présentes dans certains tableaux. Les actions peuvent concerner les lignes sélectionnées ou l’ensemble du tableau.

Accessibilité pour les lecteurs d’écran

• Un lecteur d’écran annonce généralement qu’il rencontre un tableau, ainsi que le nombre de lignes et de colonnes qu’il contient.
• Si une légende (caption) est présente, elle est lue par le lecteur d’écran, offrant ainsi une introduction au tableau.
• Les utilisateurs de lecteurs d’écran peuvent naviguer dans le tableau cellule par cellule, ligne par ligne ou colonne par colonne.
• Le lecteur d’écran lit l’en-tête de ligne ou de colonne, puis le contenu des cellules de données, permettant à l’utilisateur de comprendre le contexte de l’information.
• Des en-têtes bien définis sont essentiels, car ils permettent au lecteur d’écran d’établir correctement ces associations.