« Peux-tu mettre ça en tableau pour que ce soit plus lisible ? » Cette demande, courante en rédaction de contenu, cache parfois un piège : un tableau utilisé pour aligner visuellement des colonnes de texte sans rapport avec des données tabulaires réelles perturbe gravement la lecture au lecteur d’écran, qui annonce systématiquement le nombre de lignes et de colonnes, la position dans le tableau, et le contenu de l’en-tête associé à chaque cellule.
À l’inverse, un vrai tableau de données mal structuré, sans en-têtes déclarés, prive l’utilisateur de tout repère : chaque cellule est lue de façon isolée, sans savoir à quelle colonne ni à quelle ligne elle appartient. Le bloc Tableau de l’éditeur WordPress permet d’éviter ces deux écueils, à condition de connaître ses réglages.
Distinguer mise en page et données tabulaires
La première règle, la plus simple à énoncer et pourtant la plus souvent transgressée avant l’arrivée de l’éditeur de blocs, tient en une phrase : un tableau HTML sert à présenter des données qui ont un rapport en lignes et en colonnes, jamais à aligner visuellement des blocs de contenu sans relation tabulaire. Depuis que Gutenberg permet des mises en page en colonnes natives, cet usage détourné du tableau a heureusement quasiment disparu, mais il persiste encore dans du contenu ancien migré depuis un éditeur classique.
Activer une véritable ligne d’en-tête
Dans le bloc Tableau, le panneau latéral propose deux cases à cocher : « En-tête » et « Pied de page ». Cocher la case En-tête transforme la première ligne en éléments <th> avec l’attribut scope="col", ce qui permet aux technologies d’assistance d’annoncer automatiquement l’en-tête de colonne correspondant lorsqu’un utilisateur navigue de cellule en cellule.
<table>
<thead>
<tr>
<th scope="col">Formule</th>
<th scope="col">Prix mensuel</th>
<th scope="col">Support inclus</th>
</tr>
</thead>
<tbody>
<tr>
<td>Essentiel</td>
<td>29 €</td>
<td>E-mail uniquement</td>
</tr>
</tbody>
</table>
Beaucoup de rédacteurs saisissent leur tableau sans jamais cocher cette case, produisant un tableau visuellement identique mais dont la première ligne reste une simple série de <td>, indiscernable du reste des données pour une technologie d’assistance.
Le cas des tableaux à double en-tête
Certains tableaux comportent à la fois un en-tête de colonnes et un en-tête de lignes, par exemple un tableau comparatif où la première colonne liste des critères et la première ligne liste des produits. Le bloc Tableau natif ne permet pas nativement de déclarer un scope="row" sur la première colonne ; il faut alors éditer le tableau en mode HTML, accessible depuis le menu d’options du bloc, pour ajouter manuellement cet attribut sur les cellules concernées.
| Situation | Solution recommandée |
|---|---|
| Tableau simple, une ligne d’en-tête | Cocher la case En-tête dans le bloc natif |
| Tableau avec en-tête de lignes et de colonnes | Éditer en HTML pour ajouter scope= »row » |
| Contenu sans relation tabulaire réelle | Utiliser des colonnes ou une liste, jamais un tableau |
Ajouter une légende utile
L’élément <caption>, que le bloc Tableau natif ne propose pas directement mais que l’on peut ajouter en édition HTML, donne un titre au tableau, annoncé en premier par le lecteur d’écran avant même la première cellule. Sur une page comportant plusieurs tableaux, cette légende devient précieuse pour permettre à l’utilisateur de savoir immédiatement de quel tableau il s’agit, sans devoir en parcourir le contenu.
- Une ligne d’en-tête cochée pour tout tableau comportant des colonnes nommées
- Un attribut scope= »row » ajouté manuellement pour les tableaux à double en-tête
- Une légende (caption) sur les pages comportant plusieurs tableaux
- Aucun tableau utilisé uniquement pour aligner visuellement du contenu
Un tableau bien structuré rend service à tout le monde, pas seulement aux utilisateurs de lecteur d’écran : un tableau responsive qui s’effondre proprement sur mobile s’appuie généralement sur la même structure sémantique propre que celle exigée par l’accessibilité.
En résumé
Le bloc Tableau natif de WordPress couvre correctement les cas simples, à condition de penser à cocher la case En-tête, un réflexe trop souvent oublié en rédaction courante. Les tableaux plus complexes, à double en-tête, demandent un passage en édition HTML pour ajouter les attributs scope nécessaires. Dans tous les cas, la question à se poser avant de créer un tableau reste la même : ce contenu a-t-il réellement une structure de données en lignes et en colonnes, ou s’agit-il d’une mise en page déguisée ?
