Tableau de mise en forme non linéarisable : RGAA 5.3

Q: Faut-il ajouter role="presentation" sur un tableau de mise en forme ?

Non, role="presentation" ne suffit pas à rendre un tableau de mise en forme conforme au critère 5.3. Il masque la sémantique "tableau" mais ne garantit pas la cohérence de la linéarisation. La vraie correction est de remplacer le tableau par du CSS.

C'est quoi

Un tableau de mise en forme (layout table) est une balise <table> utilisée pour structurer la page visuellement plutôt que pour présenter des données tabulaires. Cette pratique, courante dans le web des années 2000, subsiste dans certains thèmes WordPress ou e-mails HTML. Le problème : les lecteurs d'écran et certains navigateurs lisent les cellules d'un tableau dans l'ordre du DOM (ligne par ligne, de gauche à droite). Si la mise en page visuelle ne correspond pas à cet ordre, le texte devient incohérent ou inintelligible à la lecture linéaire. Un tableau de mise en forme ne doit pas non plus porter de balises ou attributs réservés aux tableaux de données : pas de <th>, pas de <caption>, pas d'attribut summary, pas de role="rowheader" ou role="columnheader". Ces éléments trompent le lecteur d'écran sur la nature du contenu.

Qui est touché

Les personnes aveugles ou malvoyantes : le lecteur d'écran lit les cellules dans l'ordre du DOM. Si l'ordre DOM ne correspond pas à l'ordre de lecture logique, le contenu est inintelligible.
Les personnes qui désactivent les CSS : le contenu s'affiche dans l'ordre du DOM, révélant les problèmes de linéarisation.

Impact business

Un tableau de mise en forme mal structuré peut restituer des phrases dans le désordre ou mélanger des informations sans lien entre elles, rendant le contenu inexploitable pour un utilisateur de lecteur d'écran.

Cette erreur est plus fréquente dans les pages migrées d'anciens sites, les thèmes premium vieillissants et les gabarits d'e-mails HTML.

Sources des chiffres

Comment le détecter

Audit Mynto : le scan détecte les tableaux sans en-têtes de données et vérifie la présence d'éléments réservés aux données dans les tableaux de mise en forme.
Manuel : désactive les CSS dans le navigateur (extensions comme "Web Developer Toolbar") et vérifie que le contenu reste lisible dans l'ordre d'affichage.
Inspecte le code source : si une <table> est utilisée pour aligner des colonnes de texte sans rapport logique, c'est probablement un tableau de mise en forme.

Comment corriger

Avant - HTML

<!-- Tableau utilisé pour deux colonnes côte à côte : logo + texte -->
<table>
  <tr>
    <td><img src="logo.png" alt="Logo"></td>
    <td>
      <h1>Notre entreprise</h1>
      <p>Texte de présentation...</p>
    </td>
  </tr>
</table>

Après - HTML

<!-- Remplacement par CSS Flexbox : même rendu visuel, ordre DOM logique -->
<div style="display: flex; align-items: center; gap: 1rem;">
  <img src="logo.png" alt="Logo">
  <div>
    <h1>Notre entreprise</h1>
    <p>Texte de présentation...</p>
  </div>
</div>

La correction recommandée est de remplacer le tableau de mise en forme par du CSS : Flexbox ou Grid permettent le même rendu visuel sans contrainte sur l'ordre DOM.

Si le tableau de mise en forme ne peut pas être supprimé immédiatement, assure-toi que :

L'ordre des cellules dans le DOM correspond à l'ordre de lecture logique.
Le tableau ne contient aucun <th>, <caption>, summary, ni attribut scope, headers, role="rowheader" ou role="columnheader".

Sur WordPress, les tableaux de mise en forme dans les éditeurs visuels (Elementor, Bricks) doivent être reconvertis en sections/colonnes CSS.

Questions fréquentes

Comment distinguer un tableau de mise en forme d'un tableau de données ?

Un tableau de données présente des informations structurées avec une relation logique entre lignes et colonnes (grille tarifaire, tableau de comparaison, horaires). Un tableau de mise en forme positionne des blocs de contenu sans relation tabulaire entre eux.

Faut-il ajouter role="presentation" sur un tableau de mise en forme ?

Non, role="presentation" ne suffit pas à rendre un tableau de mise en forme conforme au critère 5.3. Il masque la sémantique "tableau" mais ne garantit pas la cohérence de la linéarisation. La vraie correction est de remplacer le tableau par du CSS.

Les tableaux dans les e-mails HTML sont-ils concernés ?

Les e-mails HTML utilisent encore les tableaux pour la mise en page, car les clients e-mail supportent mal Flexbox et Grid. Le critère RGAA 5.3 s'applique aux pages web, pas aux e-mails. Cependant, veiller à la linéarisation reste une bonne pratique pour les e-mails aussi.

Cette erreur est-elle sur ton site ?

Lance un audit Mynto gratuit. Tu sauras en quelques minutes si ton site est concerné, sur quelles pages, et avec quel impact.

Tableau de mise en forme non linéarisable