Accessibilité des tableaux avec le RGAA
Les critères du référentiel général d'amélioration de l'accessibilité
Les tableaux sont un excellent moyen de structurer une information pour la restituer avec clarté et synthèse. Mis en forme grâce à des balises HTML spécifiques, ils demandent également des efforts particuliers pour répondre aux critères d’accessibilité du RGAA.
Découvrez mes conseils pour rendre vos tableaux accessibles, sans remettre en question la pertinence SEO de votre site web.
Introduction : les différents types de tableaux
Le Référentiel général pour l’amélioration de l’accessibilité distingue deux types de tableaux, en fonction des données qu’ils recèlent.
Les tableaux de données
Un tableau de données permet d‘organiser et d’établir des relations entre des informations en s’appuyant sur des lignes, des colonnes et évidemment des en-têtes de colonnes. Il a pour objectif premier de donner un sens logique aux données.
Construit au choix avec les balises <table> ou role="table", il doit être accessible aux technologies d’assistance : celles-ci peuvent naviguer à l’intérieur des cellules, et notamment les associer aux en-têtes correspondantes.
Il repose sur des éléments d’accessibilité cruciaux, comme un titre (<caption> étant la méthode la plus recommandée et la plus robuste) et des en-têtes (<th>), qui expliquent son contenu et sa structure, surtout en cas de tableaux complexes où les en-têtes ne sont pas simples à comprendre.
Les tableaux de données complexes présentent une particularité : les en-têtes ne sont pas répartis uniquement sur la première ligne ou la première colonne.
Les tableaux de mise en forme
Le tableau de mise en forme, quant à lui, “détourne” l’élément <table> dans un objectif de mise en forme, en mettant par exemple une image à droite d’un texte ou en écrivant sur deux colonnes. Cette méthode est obsolète, et dans les faits vous ne devriez pas avoir de tableau de mise en forme. En effet, des méthodes bien plus propres telles que les <div>avec une mise en forme CSS.
Voici un exemple de tableau de données.
| Parc National | Date de Création | Superficie du Cœur (ha) |
|---|---|---|
| Parc National du Mercantour | 1979 | 67 900 |
| Parc National des Écrins (partie PACA) | 1973 | 46 500 |
| Parc National des Calanques | 2012 | 92 000 |
| Parc National de Port-Cros | 1963 | 4 600 |
Deux solutions techniques permettent de créer ce type de tableau : balise HTML <table> ou l’attribut WAI-ARIA role="table".
Avec la balise <table> :
<table>
<caption>
Parcs Nationaux de la région Provence-Alpes-Côte d'Azur (PACA) classés par Superficie du Cœur
</caption>
<thead>
<tr>
<th scope="col">Parc National</th>
<th scope="col">Date de Création</th>
<th scope="col">Superficie du Cœur (ha)</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Parc National du Mercantour</th>
<td>1979</td>
<td>67 900</td>
</tr>
<tr>
<th scope="row">Parc National des Écrins</th>
<td>1973</td>
<td>92 000</td>
</tr>
<tr>
<th scope="row">Parc National des Calanques</th>
<td>2012</td>
<td>52 000</td>
</tr>
<tr>
<th scope="row">Parc National de Port-Cros</th>
<td>1963</td>
<td>4 600</td>
</tr>
</tbody>
</table>
Avec l’attribut WAI-ARIA :
<div role="table" aria-label="Parcs Nationaux de la région Provence-Alpes-Côte d'Azur (PACA) classés par Superficie du Cœur">
<div role=”rowgroup”>
<div role=”row”>
<span role=”columnheader” aria-sort=”none”>Parc National</span>
<span role=”columnheader” aria-sort=”none”>Date de Création</span>
<span role=”columnheader” aria-sort=”none”>Superficie du Cœur (ha)</span>
</div>
</div>
<div role=”rowgroup”>
<div role=”row”>
<span role=”rowheader”>Parc National du Mercantour</span>
<span role=”cell”>1979</span>
<span role=”cell”>67 900</span>
</div>
<div role=”row”>
<span role=”rowheader”>Parc National des Écrins</span>
<span role=”cell”>1973</span>
<span role=”cell”>92 000</span>
</div>
<div role=”row”>
<span role=”rowheader”>Parc National des Calanques</span>
<span role=”cell”>2012</span>
<span role=”cell”>52 000</span>
</div>
<div role=”row”>
<span role=”rowheader”>Parc National de Port-Cros</span>
<span role=”cell”>1963</span>
<span role=”cell”>4 600</span>
</div>
</div>
</div>
1. L'accessibilité des tableaux de données
Votre tableau de données doit répondre à certains impératifs pour respecter les critères d’accessibilité RGAA :
- Titre (si votre tableau en possède un) ;
- En-tête(s) de colonne(s) ;
- En-tête(s) de ligne(s).
Le Référentiel général pour l’amélioration de l’accessibilité s’assure que ces éléments sont bien prix en considération par les technologies d’assistance, et notamment par les lecteurs d’écran. Vous devez pour cela répondre à un ensemble de critères.
Vous devez tout d’abord vous assurer que celui-ci est bien accessible aux technologies d’assistance.
Les tableaux construits autour d’une balise <table> doivent avoir de préférence un élément <caption>. Cette option ne fonctionne pas avec les tableaux autour d’un attribut role="table" .
D’autres solutions fonctionnent pour tous les types de tableaux de données (<table> ou role="table") :
- Un attribut
title; - Un attribut WAI-ARIA
aria-label; - Un attribut WAI-ARIA
aria-labelledbyréférençant un passage de texte identifié par un ID.
Si votre tableau possède bien un titre, vous devez vous assurer également de sa pertinence pour être conforme au RGAA. Son intitulé doit en effet décrire avec synthèse et justesse sa finalité et son contenu.
Voici des exemples d’intégration pour un tableau utilisant la balise <table> :
Avec un élément caption :
<table>
<caption>Mon titre personnalisé</caption>
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
Avec un attribut title :
<table title="Mon titre personnalisé">
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
Avec un attribut aria-label :
<table aria-label="Mon titre personnalisé">
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
Chaque cellule servant d’en-tête doit être correctement identifiée. En cas de tableau données simple, vous avez deux grandes options :
- Option HTML : Utiliser la balise native
<th>(Table Header). - Option WAI-ARIA : utiliser un attribut WAI-ARIA correspondant :
- Pour une colonne complète :
role="columnheader". - Pour une ligne complète :
role="rowheader".
- Pour une colonne complète :
Ces marquages sont essentiels pour que les technologies d’assistance puissent naviguer de manière cohérente dans le tableau et annoncer le contexte des données à l’utilisateur (par exemple, en disant “Superficie du Coeur (ha), 92 000”).
<table>, vous pouvez ajouter un attribut <scope> dans chaque balise <th> :
<th scope="col">si l’en-tête s’applique à une colonne ;<th scope="row">si l’en-tête s’applique à une ligne.
<div> avec un aria-label, vous pouvez ajouter un attribut WAI-ARIA role="rowheader" ou role="columnheader" :
-
<div role="columnheader">si l’en-tête s’applique à une colonne ;<div role="rowheader">si l’en-tête s’applique à une ligne.
<div> et <table>) peuvent également utiliser un id pour associer en-têtes et cellules en conformité avec le RGAA :
- En cas de tableau avec
<table>, vous renseignez un id dans les en-têtes (balises<th>) et vous indiquez dans les cellules les id associés avec un attributheaders, en les séparant par un espace s’il y en a plusieurs. Par exemple, vous avez une en-tête<th id="produit">et une cellule associée avec<td headers="produit">. - En cas de tableau avec
<div>, vous renseignez un id dans les en-têtes (éléments avecrole="columnheader"ourole="rowheader") et vous reprenez les id associés dans les cellules (éléments avecrole="cell") via un attributaria-labelledby(ou, dans des cas plus complexes,aria-describedby). Par exemple, vous avez une en-tête <div id=“produit” role=“columnheader”> et une cellule associée <div role=“cell” aria-labelledby=“produit”>.
Astuces et tutoriels sur l'accessibilité Web
2. L'accessibilité des tableaux de données complexes
Dans les tableaux de données complexes, les en-têtes ne sont pas répartis uniquement sur la première ligne ou la première colonne. Voici un exemple de tableau de données complexe :
La seule règle RGGA spécifique aux tableau de données complexes concerne la présence d’un résumé clairement identifié pour les technologies d’assistance, clair et pertinent.
Vous serez également amené à privilégier les id pour associer les en-têtes aux cellules, car cela permettra d’indiquer plus facilement à quelles en-têtes chaque cellule fait référence.
Le tableau de donnes complexe est, par nature, compliqué à comprendre. Et cela d’autant plus quand l’internaute utilise une technologie d’assistance et ne peut pas voir les données directement à l’écran.
Pour répondre aux critères de conformité RGAA, vous devez proposer un résumé de votre tableau qui facilite sa compréhension. Celui-ci peut être présent :
- Dans un élément
<caption>inséré juste sous la balise<table>; - Avec un attribut aria-describedby qui peut être ajouté dans la première balise (par exemple,
<table aria-describedby="resume_ventes">) ; - Dans un attribut
summaryde l’élément<table>(si vous utilisez des versions de HTML et de XHTML antérieures à HTML 5, ce que je ne vous conseille pas).
Par ailleurs, votre résumé doit être pertinent, et se montrer réellement utile pour mieux comprendre la finalité et le fonctionnement du tableau.
Le recours aux id permet d’associer en-têtes et cellules de façon plus fluide et précise dans un tableau de données complexe :
Vous utilisez une balise <table> :
- Vous renseignez un id dans les en-têtes (balises
<th>) - Vous indiquez dans les cellules les id associés avec un attribut
headers, en les séparant par un espace lorsque la cellule fait référence à plusieurs en-têtes.
Vous utilisez une balise<div> :
- Vous renseignez un id dans les en-têtes (éléments avec
role="columnheader"ourole="rowheader") - Vous reprenez les id associés dans les cellules (éléments avec
role="cell") via un attributaria-labelledby(ou, dans des cas plus complexes,aria-describedby). Par exemple, vous avez une en-tête <div id=“produit” role=“columnheader”> et une cellule associée <div role=“cell” aria-labelledby=“produit”>.
Exemples et illustrations :
Imaginez que votre cellule fasse référence à deux en-têtes avec les id “produit” et “paris”. Nous aurons :
- Cas 1 (
<table>) : des en-têtes<th id="produit" scope="col">Produit</th>et<th id="paris" scope="row">Paris</th>, et une cellule<td headers="produit paris"> - Cas 2 (
<div>) : des en-têtes<div id="produit" role="columnheader">Produit</div>et<div id="paris" role="rowheader">Paris</div>, et une cellule<div role="cell" aria-labelledby="produit paris">.
3. L'accessibilité des tableaux de mise en forme
Les tableaux de mise en forme servent simplement à définir la façon dont vous souhaitez afficher un contenu : texte en deux colonnes, texte à gauche et image à droite ou inversement, etc.
Vous devez tout d’abord garder à l’esprit que détourner la balise <table> pour mettre en forme du contenu n’est pas la solution idéale. Vous devez privilégier d’autres approches, notamment des <div> avec mise en forme CSS (dans ce cas, inutile d’ajouter role=”table” car ce n’est pas un “vrai” tableau).
Si vous décidez tout de même d’utiliser <table> pour votre mise en forme, le RGAA a prévu quelques critères de conformité.
role="presentation", supprime toutes les informations sémantiques de tableau (lignes, colonnes, en-têtes, etc.) pour les technologies d’assistance, faisant que son contenu est lu comme un simple bloc de texte ou des paragraphes. Le contenu est donc linéarisé.
La présence de l’attribut role="presentation" est un premier critère de conformité RGAA, mais vous devez également vous assurer que le contenu linéarisé de votre tableau reste compréhensible.
Les lecteurs d’écran lisent de gauche à droite, une ligne après l’autre. Vous utilisez un tableau pour afficher un texte en deux colonnes ? Vous devez faire attention à certains détails pour être en conformité avec le RGAA.
Pour ne pas induire en erreur les technologies d’assistance, votre tableau ne doit pas avoir d’attribut summary (ou alors il reste vide), et ne content pas de balises <caption>, <th>, <thead>, <tfoot> ou d’attributs WAI-ARIA role="rowheader", role="columnheader" ;
Les cellules du tableau de mise en forme (balises <td>) n’ont par ailleurs pas d’attributs scope, headers et axis.