Marquez les tableaux de façon sémantique pour définir la relation entre les cellules d’en-tête et les cellules de données.
Pour les tableaux simples comportant une rangée d’en-tête de colonne et/ou une colonne d’en-tête de rangée:
utiliser les éléments <table>, <tr>, <th>, and <td> pour le balisage.
utiliser l’attribut scope pour associer des en-têtes à leurs cellules de données et à des en-têtes parents.
Pour les tableaux complexes, utiliser les attributs id et headers pour les associations explicites.
Guide de style pour le contenu du site Canada.ca
Utilisez des tableaux pour organiser et présenter les données
La valeur de chaque cellule est liée aux en-têtes de colonne et de rangée
Les entrées d’une colonne ne contiennent pas d’information qui pourrait être considérée comme un sous-titre
La valeur de chaque cellule est alignée avec l’en-tête de colonne qui apparaît directement au-dessus
Donner au tableau un titre clair (en utilisant <caption>) qui décrit l’information qu’il contient
Convertir des tableaux complexes en un ou plusieurs tableaux simples
Convertir un tableau en liste si les données sont simples
Tableaux irréguliers
Dans les tableaux irréguliers, représenter la relation entre les en-têtes de rangée et de colonne et leurs cellules de données avec l’attribut scope:
Lorsqu’un en-tête couvre plusieurs colonnes, ajouter l’attribut scope="colgroup"à l’élément <th>.
oLorsqu’un en-tête s’étend sur plusieurs rangées, ajouter l’attribut scope="rowgroup" à l’élément <th>.
Définir les groupes dans le tableau avec les éléments <colgroup> et <tbody> :
Définir des groupes de colonnes avec l’élément <colgroup> et des colonnes individuelles avec <col> comme premier enfant de l’élément de tableau;
Définir des groupes de rangée avec l’élément <tbody>. Les éléments individuels <thead> et <tfoot> définissent leurs propres groupes
Tableaux comportant des en-têtes à plusieurs niveaux
Pour associer des en-têtes à plusieurs niveaux à des cellules de données:
Donner à chaque en-tête une valeur d’attribut id unique;
Faire référence à ces valeurs d’attribut id dans l’attribut headers des cellules de données définies par l’en-tête.
La technique des id/header n’est pas bien prise en charge par les lecteurs d’écran à l’heure actuelle (2021). Pour simplifier la présentation des données, il faut diviser le tableau complexe en deux tableaux pour qu’il soit plus simple.
Légendes et sommaire
Utiliser l’élément <caption> pour fournir un nom ou un titre visible pour le tableau.
Si la légende reproduit le titre précédent, masquer visuellement la <caption> avec la classe CSS de la BOEW .wb-inv.
Placer l’élément <caption> comme enfant direct de l’élément <table>
Fournir un sommaire pour les tableaux complexes comprenant le but, la composition, les tendances ou l’utilisation.
Dans la mesure du possible, convertir des tableaux complexes en tableaux ou listes simples, de sorte qu’une explication moindre ou nulle ne soit requise.
Ne pas reproduire l’information de la légende dans le sommaire.
Choisir une méthode pour présenter les sommaires des tableaux :
Imbriquer le sommaire dans l’élément <caption>
Placer le sommaire dans un paragraphe précédant ou suivant le tableau. Faire référence au sommaire du tableau avec l’attribut aria-describedby.
Utiliser l’élément <figure> pour marquer un sommaire de tableau. Utiliser les attributs aria-labelledby et aria-describedby pour associer, respectivement, la légende et le sommaire au tableau.
Conseils et astuces supplémentaires
Divisez un tableau complexe en tableaux plus petits et plus simples qui contiennent des données se rapportant à un sujet secondaire.
Commencer un nouveau <table> lorsque le sujet change.
Séparez chaque élément de données dans sa propre cellule.
Ne pas utiliser de sauts de ligne (éléments <br>) pour créer des rangées de tableau.
Alignez le texte à gauche et les données numériques à droite.
Différencier visuellement les cellules d’en-tête <th> et de données <td>.
Donnez des styles différents aux rangées paires et impaires pour améliorer la lisibilité.
S’assurer que le tableau n’est pas tronqué (p. ex., ne pas utiliser de overflow: hidden dans les feuilles de style CSS).
Évitez d’utiliser des tableaux pour la mise en page. Utilisez plutôt une feuille de style CSS pour la mise en page.