Les tableaux utilisés uniquement pour la mise en page sont-ils bien distingués des tableaux de données, sans éléments qui pourraient induire les logiciels de lecture en erreur ?
Critère officiel 5.8 — 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 ?
Pourquoi c'est important
Si un tableau de mise en page contient des éléments propres aux tableaux de données — titres de colonnes, résumés — le logiciel de lecture annonce une structure de données là où il n'y en a pas. L'utilisateur cherche des données à naviguer et se retrouve perdu.
Exemples concrets
Ce qui est conforme
Le tableau de mise en page utilisé pour aligner deux blocs d'information côte à côte ne contient aucun élément de tableau de données : pas de titre de colonnes, pas de légende, pas de résumé. Le logiciel de lecture le parcourt sans l'annoncer comme un tableau de données.
Ce qui pose problème
Un tableau de mise en page contient des cases d'en-tête en gras qui ont été déclarées comme en-têtes de tableau. Le logiciel de lecture annonce : « Tableau, 2 colonnes, 5 lignes — En-tête colonne 1 : Nos services » alors que ce tableau n'a aucune fonction de données.
Comment agir
La solution durable est de supprimer tous les tableaux de mise en page et de les remplacer par des blocs CSS. Demandez à votre prestataire de vérifier si votre site contient des tableaux utilisés uniquement pour l'organisation visuelle, et de les convertir en mise en page CSS lors de la prochaine intervention.
Règles clés
- Utiliser uniquement <td> dans un tableau de mise en forme.
- Ajouter role='presentation' ou role='none' sur le <table>.
- Préférer CSS flexbox/grid pour toute nouvelle mise en page.
Erreurs fréquentes
- Tableau de mise en forme avec <th> dans la première ligne
- Tableau de mise en forme avec <caption>
- Emails HTML avec tableaux utilisant des <th>
Exemples de code
tableau de mise en forme avec th
✗ Non conforme<table>
<tr>
<th>Contact</th>
<th>Informations</th>
</tr>
<tr>
<td><img src="photo.jpg" alt="Marie Dupont"></td>
<td><p>Marie Dupont, directrice...</p></td>
</tr>
</table>Les <th> 'Contact' et 'Informations' sont des en-têtes de mise en page, pas de données. Annoncés comme en-têtes de colonnes — information incorrecte.
tableau de mise en forme avec role presentation
✓ Conforme<table role="presentation">
<tr>
<td><img src="photo.jpg" alt="Marie Dupont"></td>
<td>
<h2>Marie Dupont</h2>
<p>Directrice...</p>
</td>
</tr>
</table>role='presentation' neutralise la sémantique. Uniquement des <td>. La sémantique du contenu (<h2>, <p>) est préservée.
Référence WCAG : 1.3.1