Structurer les tableaux de données

Cible : tout le monde, et en particulier les personnes déficientes visuelles.
Quand : dès la phase de conception et lors du développement.

Description :

Pour des données tabulaires :

  • Utiliser l’élément table avec les éléments enfants th (pour les cellules d’entêtes), td, tr.
  • Utiliser l’attribut scope avec la valeur row/col pour associer les cellules d’en-têtes et les cellules de données ; pour des tableaux complexes, utiliser les attributs id et headers.
  • Utiliser la balise caption, une balise h1 à h6 juste avant le tableau ou lier un texte proche du tableau via un attribut aria-labelledby dans l’élément table pour associer un titre au tableau (cf. les attributs ARIA qui peuvent vous sauver).
  • Ajouter un résumé afin d’expliciter la structure d'un tableau complexe :
    • HTML5: ajouter le résumé directement dans la légende (caption).
    • Version antérieure d'HTML: ajouter le résumé dans un attribut summary.

À vérifier :

  • Rappel : ne pas utiliser de tableaux à des fins de mise en page.
  • La légende (caption) peut être remplacée par un titre de section (hx) placé avant le tableau.
  • Préférer scinder un tableau complexe en plusieurs tableaux plus simples.
  • Les balises tbody, tfoot et thead n’ont aucune influence sur l’accessibilité, il n’y a donc pas d’obligation à les utiliser.

Dans le cas d’un tableau complexe, un résumé est présent pour expliciter la structure :

  • HTML5: le résumé du tableau est présent dans la légende (caption).
  • HTML5 - solution alternative: le résumé est lié au tableau via un attribut aria-describedby
  • Version antérieure d'HTML: le résumé est présent dans un attribut summary du tableau

Objectif utilisateur : Donner un résumé et un titre aux tableaux de données permet à tous d’en connaître l’objet rapidement sans avoir à le parcourir. Pour des utilisateurs déficients visuels, lier les cellules aux en-têtes permet de se situer dans le tableau et de comprendre les données de celui-ci.

Référence WCAG :