Chaque tableau de mise en forme ne doit pas utiliser d’éléments propres aux tableaux de données. Cette règle est-elle respectée ?
Un lecteur d'écran lit un <th> et annonce « en-tête ». Il lit un <caption> et annonce un titre de tableau. Quand ces éléments se trouvent dans un tableau de mise en forme — un <table> utilisé uniquement pour positionner du contenu visuellement — le lecteur d'écran annonce une structure sémantique qui n'existe pas. L'utilisateur cherche des données, des relations ligne/colonne : il n'y en a aucune.
Ce critère exige que les tableaux de mise en forme restent neutres sémantiquement. Concrètement : pas d'attribut summary sur le <table>, pas d'éléments <caption>, <thead>, <th>, <tfoot>, pas d'éléments avec role="rowheader" ou role="columnheader". Sur les cellules <td> : aucun attribut scope, headers ou axis.
Un tableau de mise en forme propre ne contient que des <tr> et des <td>. C'est tout. Le critère 5.3 impose en complément l'attribut role="presentation" sur le <table> lui-même — les deux critères vont de pair pour neutraliser complètement la sémantique de tableau.
Un test pour s'assurer qu'aucune balise de données n'est détournée en mise en forme
Absence de balises de données dans un tableau de mise en forme
- Identifiez tous les tableaux de mise en forme dans la page (tableaux utilisés uniquement pour la mise en page visuelle, pas pour des données).
- Pour chaque
<table>de mise en forme, vérifiez l'absence des éléments et attributs suivants :- Attribut
summarysur<table> - Éléments enfants
<caption>,<thead>,<tfoot>,<th> - Éléments avec
role="rowheader"ourole="columnheader"
- Attribut
- Pour chaque
<td>à l'intérieur de ce tableau, vérifiez l'absence des attributsscope,headersetaxis. - Si tous les tableaux de mise en forme respectent ces conditions, le test est validé. Dès qu'un seul élément interdit est présent, le test échoue.
Exemples
❌ Non conforme : Tableau de mise en forme avec balises de données
<table summary="Disposition en deux colonnes">
<caption>Contenu principal et sidebar</caption>
<thead>
<tr>
<th scope="col">Contenu</th>
<th scope="col">Navigation</th>
</tr>
</thead>
<tbody>
<tr>
<td>Article principal...</td>
<td>Liens de navigation...</td>
</tr>
</tbody>
</table>Ce tableau est utilisé uniquement pour positionner deux blocs côte à côte. Pourtant, il contient un summary, un <caption>, un <thead> et des <th> avec scope. Un lecteur d'écran comme NVDA annoncera « tableau, Contenu principal et sidebar, colonne 1 Contenu, colonne 2 Navigation ». L'utilisateur attend des données tabulaires et navigue entre les cellules avec les flèches — pour rien : ce n'est que de la mise en page.
✅ Conforme : Tableau de mise en forme neutre sémantiquement
<table role="presentation">
<tbody>
<tr>
<td>Article principal...</td>
<td>Liens de navigation...</td>
</tr>
</tbody>
</table>Le tableau ne contient que <tr> et <td>, sans aucune balise de données. L'attribut role="presentation" (critère 5.3) neutralise la sémantique résiduelle. Le lecteur d'écran ignore la structure et lit le contenu des cellules en séquence, comme du texte ordinaire.
Astuces et pièges
⚠️ Le <th> « visuel » qui traîne dans un layout
C'est l'erreur la plus fréquente en audit. Un développeur utilise <th> pour mettre le texte en gras sans CSS, dans un tableau de mise en forme. Visuellement, ça ressemble à un titre de section. Pour le lecteur d'écran, c'est un en-tête de tableau qui annonce des colonnes inexistantes. Utilisez un <strong> ou du CSS à la place.
⚠️ summary hérité d'un vieux template
L'attribut summary sur <table> était courant avant HTML5 pour décrire les tableaux de données. Il traîne encore dans des templates anciens, y compris sur des tableaux de mise en forme. Il est invalide en HTML5 et interdit ici. Supprimez-le systématiquement des tableaux de layout.
⚠️ role="columnheader" dans un composant imbriqué
Un widget JavaScript (calendrier, grille de réservation) peut injecter des éléments avec role="columnheader" à l'intérieur d'un <table> de mise en forme parent. Le critère s'applique à l'ensemble : si un tel rôle est présent dans le tableau, le test échoue, même si c'est un composant tiers. Isolez les widgets dans des <div> plutôt que dans des <table> de layout.
💡 5.3 et 5.8 sont complémentaires, pas redondants
Le critère 5.3 impose role="presentation" sur le <table> pour neutraliser la sémantique. Le critère 5.8 interdit les balises de données à l'intérieur. Les deux sont nécessaires : role="presentation" sans suppression des <th> laisse des éléments sémantiques actifs dans certains lecteurs d'écran.
⚠️ Un tableau peut changer de nature selon le contexte
Un tableau qui affiche des tarifs est un tableau de données (critères 5.1 à 5.7). Ce même tableau stylé différemment pour une mise en page responsive ne devient pas un tableau de mise en forme pour autant. La nature du tableau dépend du contenu, pas du CSS. Ne transformez pas un tableau de données en tableau de mise en forme pour échapper aux contraintes d'en-têtes.
Questions fréquentes
Comment distinguer un tableau de mise en forme d'un tableau de données ?
Posez-vous cette question : si on retire le tableau et qu'on lit le contenu en séquence linéaire, est-ce que l'information a toujours du sens ? Si oui, c'est probablement un tableau de mise en forme. Si les relations entre lignes et colonnes sont porteuses d'information (tarifs, horaires, comparatifs), c'est un tableau de données. En cas de doute, préférez le tableau de données — il est plus contraignant mais plus robuste.
Comment auditer efficacement le critère RGAA 5.8 sur les tableaux de mise en forme ?
Dans les DevTools, sélectionnez tous les <table> de la page et cherchez les attributs summary, les enfants <caption>, <thead>, <tfoot>, <th>, et les attributs scope/headers/axis sur les <td>. En ligne de commande, document.querySelectorAll('table th, table caption, table thead, table tfoot') renvoie immédiatement les tableaux suspects. Identifiez ensuite lesquels sont de mise en forme.
Quel effet produit role="presentation" sur un <th> dans un tableau de mise en forme RGAA ?
Non. Le critère 5.8.1 interdit la présence de <th> dans un tableau de mise en forme, sans exception. Remplacer <th> par <td> est la seule solution conforme. Neutraliser un <th> avec role="presentation" n'est pas prévu par la méthodologie RGAA et reste une zone de risque avec certains lecteurs d'écran.
Comment corriger les tableaux de mise en forme avec <th> générés par un CMS ou WYSIWYG ?
C'est un problème fréquent avec les éditeurs riches. La correction doit se faire à la source : configurez le CMS pour ne pas générer de <th> dans les tableaux de layout, ou ajoutez une transformation côté serveur. Corriger manuellement le HTML produit n'est pas viable à long terme.
Pourquoi les tableaux CSS display: table sont-ils concernés par le critère RGAA 5.8 ?
Non. Un <div> avec display : table en CSS n'est pas un élément <table> HTML. Le critère 5.8 porte exclusivement sur les éléments <table> du DOM. Les mises en page via display : table ou CSS Grid n'entrent pas dans le périmètre des critères du thème 5.