Tableaux de données accessibles
Un tableau est une grille : l'information d'une cellule n'a de sens que croisée avec ses en-têtes. À l'œil, l'alignement suffit à faire ce croisement. Au lecteur d'écran, il n'existe pas — il faut que le code déclare quelle cellule dépend de quel en-tête.
La première question
Avant toute chose : ce tableau présente-t-il des données, ou sert-il à positionner des éléments à l'écran ?
| Nature | Traitement |
|---|---|
| Tableau de données | Titre, en-têtes déclarés, association des cellules aux en-têtes |
| Tableau de mise en forme | Aucun élément de structuration : ni titre, ni en-tête, ni résumé |
La seconde pratique est heureusement devenue rare, mais elle survit dans les courriels et dans certains contenus importés.
Les trois éléments indispensables
- Un titre de tableau, qui décrit ce que le tableau contient. Il permet à l'utilisateur de décider s'il vaut la peine d'y entrer — utile quand la page en comporte plusieurs.
- Des en-têtes déclarés comme tels, et non de simples cellules mises en gras.
- Une portée définie pour chaque en-tête : s'applique-t-il à sa colonne, ou à sa ligne ?
La plupart des tableaux déclarent leurs en-têtes de colonne et oublient ceux de ligne. Résultat : le lecteur d'écran annonce « 4,5:1 » sans jamais dire à quelle ligne cette valeur correspond.
La règle pratique : la première cellule de chaque ligne est presque toujours un en-tête de ligne. Tous les tableaux de ce site sont construits ainsi.
Les tableaux complexes
Deux niveaux d'en-têtes, cellules fusionnées, en-têtes sur plusieurs lignes : l'association simple par portée ne suffit plus, et il faut lier explicitement chaque cellule à ses en-têtes.
Avant d'en arriver là, une question mérite d'être posée : ce tableau complexe ne gagnerait-il pas à être scindé en plusieurs tableaux simples ? La réponse est oui bien plus souvent qu'on ne le croit, et le résultat est plus lisible pour tout le monde.
Le tableau en petite largeur
Un tableau large ne peut pas toujours se réorganiser sans perdre son sens. La solution acceptable consiste à le rendre défilable horizontalement dans son propre conteneur, de sorte que la page elle-même ne défile jamais latéralement.
Ce que nous appliquons sur ce site : chaque tableau est encapsulé dans un conteneur à défilement propre. Voir notre déclaration d'accessibilité.
Le bon usage du tableau
Il en existe un qui est trop rare : la description détaillée d'un graphique. Un tableau de données placé sous une infographie sert les personnes aveugles, celles qui veulent les valeurs exactes, et les moteurs. Voir les alternatives textuelles.
Poursuivre
Pour le lien entre tout ce qui précède et la visibilité du site, voyez accessibilité et SEO.