Pratique exemplaire

Concept des tableaux

  • 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.
Haut de la page