2.4.4 Les tableaux complexes ont un attribut headers

Un tableau de données complexe est un tableau qui a au moins deux niveaux d'en-têtes de colonnes ou de lignes. L'attribut headers offre la possibilité de rendre ce genre de tableaux accessible, mais cela reste relativement compliqué. De manière générale, il est plus simple de diviser le tableau en plusieurs tableaux.

Pourquoi?

Le fait d'utiliser correctement l'attribut headers lors de la construction d'un tableau complexe va permettre aux lecteurs d'écran d'annoncer les en-têtes de colonnes et de lignes des différents niveaux lorsque le contenu d'une cellule est lu.

En pratique

Evitez de préférence les tableaux complexes en les divisant en plusieurs tableaux simples.

Si vous décidez d'utiliser un tableau complexe, alors

  • donnez à chaque en-tête (th) un attribut id,
  • utilisez l'attribut headers dans chaque cellule (tr) pour indiquer les en-têtes correspondants.

Exemple de tableau complexe

Heures d'ouverture de la maison communale et du CPAS
Maison communaleCPAS
JourMatinAprès-midiMatinAprès-midi
Lundi 8h-12h Fermé Fermé 14h-18h
Mardi 8h-12h Fermé Fermé 14h-18h
Mercredi 8h-12h Fermé Fermé 14h-18h
Jeudi 8h-12h Fermé Fermé 14h-18h
Vendredi 8h-12h Fermé Fermé 14h-18h

Exemple de tableau complexe divisé en tableaux simples (option préférée)

Dans cet exemple, le tableau complexe a été divisé en deux tableaux simples , un pour la maison communale et un pour le CPAS.

Exemple de tableau complexe utilisant les attributs header et id

Dans cet exemple de tableau construit avec headers, l'aspect du tableau n'a pas changé mais l'ajout des attributs header et id le rend plus accessible.

comment tester

  • Parcourez le site à la recherche de tableaux complexes
  • Pour chaque tableau complexe procédez par inspection du code html pour vérifier que chaque cellule a un attribut headers qui fait référence aux attributs id des en-têtes correspondants.