Ce qu’un tableau devient sans balisage

Visuellement, un tableau se lit par croisement : l’œil remonte à l’en-tête de colonne, revient à l’en-tête de ligne, et situe la valeur. En restitution vocale, ce croisement n’existe pas — les cellules sont annoncées les unes après les autres.

Sans balisage, « 250 000 000 » est un nombre sans axe. Avec le balisage correct, la même cellule est annoncée avec ses deux en-têtes : « Entreprises privées, seuil de chiffre d’affaires : 250 000 000 ».

Les trois éléments qui font la différence

caption — le titre du tableau

Il dit de quoi parle le tableau, et il est restitué avec lui. Un utilisateur qui navigue de tableau en tableau ne dispose que de cela pour savoir s’il est au bon endroit. Un titre placé seulement dans un paragraphe au-dessus n’est pas rattaché au tableau.

th — les cellules d’en-tête

Une cellule d’en-tête est un <th>, pas un <td> mis en gras. La mise en forme ne crée aucune sémantique : un en-tête simulé visuellement n’est pas un en-tête.

scope — la direction de l’en-tête

scope="col" pour un en-tête de colonne, scope="row" pour un en-tête de ligne. C’est cet attribut qui permet d’associer chaque cellule à ses en-têtes.

Beaucoup de tableaux n’ont que des en-têtes de colonne alors que leur première colonne est bel et bien un en-tête de ligne : c’est l’oubli le plus fréquent, et il coûte la moitié du sens.

Les tableaux complexes

Un tableau est complexe lorsqu’une cellule dépend de plus d’un en-tête par axe — en-têtes sur plusieurs niveaux, cellules fusionnées. Le référentiel demande alors un résumé, et une association explicite entre chaque cellule et ses en-têtes.

Le meilleur traitement d’un tableau complexe reste cependant de le découper en plusieurs tableaux simples. C’est plus lisible pour tout le monde, et cela supprime la difficulté au lieu de la baliser.

Le tableau de mise en forme

Utiliser un tableau pour caler une mise en page est une pratique ancienne qui subsiste dans les courriels et certains gabarits. Si vous en avez, ils ne doivent comporter aucun élément propre aux tableaux de données — ni caption, ni th, ni scope — et leur contenu doit rester compréhensible une fois linéarisé.

Et le reflow

Un tableau large entre en tension avec l’exigence de consultation sans défilement horizontal à 320 pixels. Les tableaux de données bénéficient d’un cas particulier, à condition d’être placés dans leur propre conteneur défilant — c’est la solution retenue ici.