Tableau HTML accessible : scope, headers et cellules fusionnées
Caption, en-têtes th et scope, cellules fusionnées, association headers/id, responsive : comment structurer un tableau de données, simple ou complexe, pour qu'un lecteur d'écran relie chaque valeur à ses en-têtes, et ce que demandent les critères 5.1 à 5.8 du RGAA 4.1.2.
Un tableau de données accessible ne se contente pas d'être "lisible" visuellement. Il doit permettre à une personne aveugle utilisant un lecteur d'écran de comprendre instantanément la relation entre une donnée (ex: "12%") et ses en-têtes (ex: "Chiffre d'affaire" / "2024").
Dès que l'on sort de la grille standard simple, le défi commence. Voici comment s'en sortir sans casser l'accessibilité.
Un tableau HTML accessible tient en quatre règles : un titre dans <caption>, correctement associé et pertinent (critères RGAA 5.4 et 5.5), des en-têtes en <th> portant un attribut scope (critères 5.6 et 5.7), des en-têtes fusionnés déclarés avec colgroup ou rowgroup, et, pour les seuls tableaux irréguliers, une association explicite headers/id. Un tableau utilisé pour la mise en page, lui, ne doit porter aucun de ces éléments (critères 5.3 et 5.8). La fiche du composant tableau couvre le cas standard ; ce guide traite le reste.
Stratégie n°1 : Simplifier (votre meilleure arme)
Avant de chercher à coder un tableau complexe, posez-vous la question : ce tableau peut-il être simplifié ?La complexité visuelle est souvent l'ennemie de la compréhension pour tous, pas seulement pour les personnes handicapées.
La technique de l'Aplanissement
Si vous avez des en-têtes imbriqués (ex: « Ventes → 2023 → T1 »), essayez de les « aplanir » en une seule ligne d'en-tête claire ou en combinant les informations.
- Réduit la profondeur du tableau
- Élimine le besoin de
colspan/rowspan
La technique du Découpage
Un "méga-tableau" qui regroupe plusieurs départements ou années ? Coupez-le en plusieurs petits tableaux simples, chacun avec son propre titre (<caption>).
- Plus facile à naviguer sur mobile
- Charge cognitive réduite
Le conseil d'expert
Stratégie n°2 : L'attribut Scope (Le Standard)
Pour la majorité des tableaux, l'attribut scope sur les balises <th> est l'outil indispensable. Il indique explicitement la direction de lecture de l'en-tête.
| Valeur | Utilisation | Exemple |
|---|---|---|
| col | Pour un en-tête de colonne simple. | Nom, Prénom, Âge... |
| row | Pour un en-tête de ligne (souvent la 1ère cellule). | Lundi, Mardi, Mercredi... |
| colgroup | Pour un en-tête couvrant plusieurs colonnes (avec colspan). | "Résultats 2024" (couvrant T1, T2, T3, T4) |
| rowgroup | Pour un en-tête couvrant plusieurs lignes (avec rowspan). | "Zone Nord" (couvrant Lille, Paris, Amiens) |
<table>
<thead>
<tr>
<!-- En-tête couvrant 2 colonnes -->
<th colspan="2" scope="colgroup">Identité</th>
<th scope="col">Age</th>
</tr>
<tr>
<th scope="col">Nom</th>
<th scope="col">Prénom</th>
<!-- Cellule vide car couverte par Age au dessus si fusionnée,
sinon structure simple recommandée -->
<td></td>
</tr>
</thead>
...Cellules Fusionnées et Pièges
Les cellules fusionnées (colspan, rowspan) sont souvent responsables des problèmes d'accessibilité. Les lecteurs d'écran peuvent "perdre le fil" si la structure n'est pas explicite.
Évitez le 'Chassé-Croisé'
Règle d'or pour les fusions
- Chaque fusion doit avoir un sens sémantique (regroupement logique), pas juste esthétique.
- Utilisez
scope="colgroup"ouscope="rowgroup"sur les cellules parentes (celles qui ont l'attribut span). - Vérifiez toujours qu'il n'y a pas de "trou" dans votre grille HTML. Le nombre total de cellules (virtuelles) par ligne doit être constant.
Stratégie n°3 : La méthode Headers / ID (L'Arme Nucléaire)
Quand le tableau est totalement irrégulier ou multidimensionnel et que scope ne suffit plus, vous devez utiliser l'association explicite. C'est la méthode la plus robuste techniquement, mais la plus lourde à écrire.
Comment ça marche ?
- Vous donnez un
idunique à chaque cellule d'en-tête (<th>). - Sur chaque cellule de donnée (
<td>), vous ajoutez l'attributheaders="...". - Dans
headers, vous listez les IDs de tous les en-têtes qui concernent cette cellule, séparés par des espaces.
<tr> <th id="h-date">24 Juin</th> <th id="h-produit">Pommes</th> <!-- Cette cellule est liée à la date et au produit --> <td headers="h-date h-produit">150 tonnes</td> </tr>
Attention à la maintenance
headers. Une seule erreur (ID manquant) et l'accessibilité est brisée. À utiliser en dernier recours !Tableaux Responsive sur Mobile
Un tableau complexe devient vite illisible sur un petit écran ("Reflow"). La solution standard en accessibilité est de permettre le défilement du tableau seul, sans bloquer le défilement de la page.
Le Pattern "Scrollable Region"
<div role="region" aria-labelledby="caption-id" tabindex="0" class="overflow-auto focus:ring-2">
<table>
<caption id="caption-id">Titre du tableau</caption>
...
</table>
</div>Explication des attributs :
overflow-auto: Crée la barre de défilement si nécessaire.tabindex="0": Rend la zone focusable au clavier (pour scroller avec les flèches).role="region"+aria-labelledby: Prévient l'utilisateur aveugle qu'il entre dans une zone interactive spécifique (le tableau scrollable).
Limitations Android / TalkBack
Générateur de Tableau Accessible
Écrire manuellement tout ce code (scopes, classes responsive, attributs ARIA) est fastidieux et source d'erreurs. Utilisez notre outil pour générer une structure parfaite en quelques secondes.
Générateur de Tableau RGAA
Créez des tableaux conformes, responsive et propres. Copiez le code HTML/Tailwind prêt à l'emploi.
Accéder au générateurPièges Fréquents à Éviter
Les Colonnes Orphelines
Une colonne sans en-tête (<th>) est dite « orpheline ». C'est souvent le cas des colonnes de numérotation (1, 2, 3...) ou de cases à cocher.
→ Solution : Ajoutez toujours un en-tête, même s'il est visuellement caché avec la classe sr-only.
Les Tableaux en Strates
Un tableau avec des « super-lignes » (ex: en-tête de section comme « Département Marketing » qui couvre toute la largeur) est techniquement complexe et souvent mal restitué.
→ Solution : Découpez en plusieurs tableaux simples, un par département.
Quand fusionner des cellules de données ?
La fusion de cellules de données (pas d'en-têtes) pose aussi problème. Les lecteurs d'écran peuvent afficher le mauvais en-tête de ligne lors de la navigation.
Contenu long : fusionnez
Évite la répétition fastidieuse d'un texte volumineux.
Contenu court : répétez
Garder des cellules indépendantes est plus fiable pour les lecteurs d'écran.
Questions fréquentes sur les tableaux accessibles
Quels critères RGAA concernent les tableaux ?
La thématique 5 du RGAA 4.1.2 compte huit critères. Les critères 5.1 et 5.2 demandent un résumé pertinent pour chaque tableau de données complexe ; 5.4 et 5.5 exigent que le titre d'un tableau de données, quand il en a un, soit correctement associé (caption ou aria-labelledby) et pertinent ; 5.6 et 5.7 des en-têtes de colonnes et de lignes correctement déclarés et associés à chaque cellule (th avec scope, ou headers/id) ; 5.3 et 5.8 encadrent les tableaux de mise en forme, qui doivent rester compréhensibles une fois linéarisés et ne pas utiliser d'éléments propres aux tableaux de données.
Comment rendre accessible un tableau avec des cellules fusionnées ?
Utilisez scope="colgroup" ou scope="rowgroup" pour les en-têtes qui couvrent plusieurs colonnes ou lignes. Si la structure est trop complexe, privilégiez le découpage en plusieurs tableaux simples.
Quelle est la différence entre scope et headers/id ?
Scope définit une portée (colonne, ligne) implicite et suffit pour la grande majorité des tableaux. Headers/id crée une association explicite cellule par cellule, utile pour les tableaux très irréguliers mais plus lourde à maintenir : une seule référence cassée et la relation disparaît.
Faut-il un caption sur chaque tableau de données ?
Le RGAA ne l'impose pas : les critères 5.4 et 5.5 ne s'appliquent qu'aux tableaux de données qui ont un titre, et exigent alors qu'il soit correctement associé (caption, ou titre voisin lié par aria-labelledby) et pertinent. En pratique, donnez un caption à chaque tableau de données : il est annoncé par le lecteur d'écran avant les en-têtes et apparaît dans la liste des tableaux de la page, ce qui permet de choisir le bon sans le parcourir.
Checklist : Votre Tableau est-il Accessible ?
- Le tableau a un titre explicite via
<caption>. - Tous les en-têtes utilisent la balise
<th>(pas<td>en gras). - Chaque
<th>a un attributscopeapproprié (col,row,colgroup,rowgroup). - Aucune colonne n'est orpheline (sans en-tête).
- Le tableau ne mélange pas fusions de lignes ET de colonnes dans les en-têtes.
- Le tableau est responsive (enveloppé dans un conteneur scrollable avec
role="region"ettabindex="0"). - Si le tableau est trop complexe, envisagez de le simplifier ou de le découper.
Ce qu'il faut retenir
« Faites simple, ou préparez-vous à une batterie de tests. »
Un tableau simple est plus robuste et compréhensible pour tous.
Privilégiez scope à headers/id dans la grande majorité des cas.
Testez toujours avec NVDA + Firefox ou VoiceOver + Safari.