Tableaux de données complexes : comment les intégrer de manière accessible en HTML ?
Série Tableaux accessibles
Après les tableaux de données simples et les tableaux de mise en forme, cette seconde partie de notre série sur l’accessibilité des tableaux HTML s’intéresse aux tableaux HTML qui contiennent des cellules fusionnées et/ou des sous-contextes.
On les appelle « tableaux de données complexes », car ils sont complexes à consulter avec un lecteur d’écran ou une loupe vocalisée.
Voyons ensemble comment créer des tableaux HTML complexes accessibles et conformes au RGAA !
Qu’est-ce qu’un tableau de données complexe ?
Un tableau de données complexe est un tableau :
- dont les en-têtes s’étendent sur plusieurs lignes ou colonnes ;
- et/ou dont les en-têtes de colonne ou de ligne ne s’appliquent pas à l’intégralité de la colonne ou de la ligne concernée, par exemple parce qu’il y a des cellules fusionnées et/ou des sous-contextes.
Exemple 1
Un tableau de données sur le site de l’Insee dont les colonnes, qui indiquent le nombre de nuitées par types d’hébergements, sont divisées en milliers et en pourcentages.
Exemple 2
Un tableau de données complexe qui aurait éventuellement pu être scindé en deux tableaux, « Disponibilité des logements de vacances à Paris » et « Disponibilité des logements de vacances à Rome ». L’exemple est adapté depuis le tutoriel de la WAI (en anglais).
Studio | Appartement | Chalet | Villa | |
---|---|---|---|---|
Paris | ||||
1 chambre | 11 | 20 | 25 | 23 |
2 chambres | – | 43 | 52 | 32 |
3 chambres | – | 13 | 15 | 40 |
Rome | ||||
1 chambre | 13 | 21 | 22 | 3 |
2 chambres | – | 23 | 43 | 30 |
3 chambres | – | 16 | 32 | 40 |
Afficher le code
Quels sont les impacts des tableaux de données complexes pour les personnes handicapées ?
Pour rappel, les tableaux de données peuvent être compliqués à utiliser par les personnes aveugles ou très malvoyantes.
Les tableaux de données complexes peuvent aussi poser des problèmes aux personnes présentant un handicap mental ou cognitif, comme la dyspraxie visuo-spatiale [1], en raison de leur organisation particulière et de la densité d’information.
Comment intégrer un tableau de données complexes de manière accessible ?
Pour rendre accessible un tableau de données complexes, il faut s’assurer que les cellules de données soient bien reliées aux en-têtes correspondants et qu’un résumé explique la structure du tableau.
Liaisons entre les en-têtes et les cellules
Comme les tableaux contiennent des cellules d’en-tête fusionnées et/ou des sous-contextes, les liaisons implicites <th>
<td>
sont insuffisantes. Les liaisons scope="col"
ou scope="row"
le sont également. En effet, les attributs scope
servent à identifier les cellules d’en-tête de colonne ou de ligne uniques.
Or, maintenant qu’il y a plusieurs en-têtes de colonne ou de ligne par cellule de données, ils doivent tous être restitués.
Pour cela, on se sert d’attributs headers
sur les cellules de données qui permettent de référencer autant de cellules d’en-têtes que nécessaire.
- Définir un attribut
id
à chaque en-tête<th>
. - Pour chaque cellule de données, lui définir un attribut
headers
dont la valeur reprend les attributsid
des en-têtes concernés. Les attributsheaders
acceptent plusieurs valeurs, séparées par des espaces. Par exemple<th id="id1">
et<td headers="id1 id2">
(critère 5.6 [A] — RGAA et critère 5.7 [A] — RGAA).
Résumé du tableau complexe
Le résumé donne le titre du tableau et explique sa structure, c’est-à-dire la manière dont sont répartis les en-têtes ou les données.
- Pour un tableau de données complexe HTML natif, le résumé doit se trouver dans une balise
<caption>
(critère 5.1 [A] — RGAA et critère 5.2 [A] — RGAA) ; - Pour un tableau
role="table"
, le résumé doit être lié au tableau par un attributaria-describedby
dont la valeur correspond à l’attributid
de l’élément du résumé.
Si le contenu de votre élément <caption>
est long, sachez qu’il peut contenir entre autres des titres et des paragraphes. Vérifiez régulièrement la validité de votre code HTML.
Il est préférable que le résumé soit toujours visible ou que l’on puisse l’afficher, par exemple au moyen d’un bouton ou d’un élément <details>
.
Autres solutions pour l’accessibilité d’un tableau complexe
- Scinder le tableau complexe en plusieurs tableaux de données simples (ceux-ci devront bien sûr être accessibles, cf. Comment intégrer des tableaux accessibles en HTML ?).
- Ou bien fournir une alternative au tableau complexe dans un format accessible non tabulaire, et ajouter une ancre vers cette alternative avant le tableau (et surtout pas après le tableau : elle risquerait d’être difficilement trouvée, voire de n’être jamais consultée). Cette alternative doit contenir le même contenu que le tableau et être structurée à l’aide de titres, de paragraphes et/ou de listes.
Ressources sur les tableaux de données complexes et l’accessibilité
Conclusion de la série « Accessibilité des tableaux HTML »
Comment rendre accessibles des tableaux HTML ? Voici ce qu’il faut retenir !
- Tableaux de données simples :
- donnez un titre à chaque tableau de données à l’aide d’une balise
<caption>
; - structurez chaque tableau de données avec des cellules d’en-têtes
<th>
, et si nécessaire avec un attributscope="col"
(pour les en-têtes de colonne) ouscope="row"
(pour les en-têtes de ligne).
- donnez un titre à chaque tableau de données à l’aide d’une balise
- Tableaux de données complexes :
- donnez un titre à chaque tableau de données complexes : ce titre doit inclure un résumé qui explique l’organisation spatiale du tableau ;
- lier les cellules contenant des données à leurs en-têtes à l’aide d’attributs
id
etheaders
; - si votre tableau de données complexes est très dense, vous avez aussi la possibilité de scinder ce tableau en plusieurs tableaux de données simples, ou de proposer une alternative accessible avant le tableau.
- Tableau de mise en forme :
- si vous avez besoin de mettre en forme des contenus, préférez la mise en forme CSS à un tableau de mise en forme ;
- si vous n’avez pas le choix, déclarez chaque tableau de mise en forme avec la propriété ARIA
role="presentation"
, et structurez le contenu à l’intérieur comme il faut (titres, paragraphes, listes, etc.).
Envie de relire la série dans l’ordre ? Direction le premier article : Comment intégrer des tableaux HTML accessibles et conformes au RGAA ?
Des questions ? Envie d’en savoir plus ?
L’accessibilité a encore des secrets pour vous ? Profitez d’une session de formation certifiante Développer des sites web accessibles et conformes au RGAA !
3 jours de formation pour :
- intégrer les bonnes pratiques de l’accessibilité du web dans votre pratique professionnelle ;
- maîtriser le développement de sites, d’applications web ou de contenus accessibles ;
- utiliser les outils de tests (lecteur d’écran, inspecteur d’interface, afficheur d’arbre accessible, etc.).
Cerise sur le gâteau : cette formation peut être financée à 100 % par votre CPF (Compte Personnel de Formation).
N’hésitez pas à nous contacter pour recevoir un devis gratuit et sans engagement !
Demander un devis gratuit2 commentaires
Les commentaires sont désormais fermés, mais vous pouvez toujours nous contacter pour réagir à cet article !
Bonjour Jingwei,
Pour les tableaux éditables, je vous conseille de garder des tableaux de données pour assurer la liaison entre les cellules d'en-têtes et les cellules de données. La distinction entre « tableau de données simples » et « tableau de données complexes » dépend de la structure de votre tableau, par exemple s’il contient des cellules fusionnées ou non.
Il est également nécessaire de donner un nom accessible à chaque champ de formulaire, par exemple à l'aide d'attributs title.
Le motif de conception ARIA Grid peut également vous intéresser, en particulier les exemples « Data Grid Examples ».
Nous restons à votre disposition pour vous accompagner plus en détails sur ce projet si besoin, n'hésitez pas à nous contacter.
Bonjour Maia, merci pour votre article. Auriez-vous des recommandations concernant les tableaux éditables avec des input ou des select ? Faut-il les traiter comme un tableau de mise en forme, un tableau complexe ou un formulaire ? Est-il préférable d'éviter ce type de conception, même s'il est plus pratique pour les utilisateurs experts ?