La solution de repli sous forme de tableau de données
Présentez les nombres sous-jacents dans un tableau accessible.
La solution de repli sous forme de tableau de données est une leçon Web Accessibility Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Web Accessibility Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Web Accessibility Academy comprend 4 leçons au total.
Quand les mots ne suffisent pas
Un résumé en une ligne raconte l’essentiel, mais certaines personnes veulent les chiffres. Un tableau de données leur fournit les valeurs brutes du graphique.
Le tableau est la source de vérité
Considérez le graphique comme une représentation visuelle d’un tableau. Proposez ce même tableau avec un balisage réel : toutes les technologies d’assistance pourront alors le lire correctement.
Utiliser un véritable élément table
Les lecteurs d’écran comprennent très bien l’élément natif table : les lignes, les colonnes et les en-têtes sont tous annoncés correctement, sans ARIA supplémentaire.
<table>
<tr><th>Month</th><th>Sales</th></tr>
<tr><td>Jan</td><td>120</td></tr>
</table>Ajouter une légende au tableau
Une légende nomme le tableau afin que la personne qui l’écoute sache quelles données elle a atteintes. Elle est lue dès que le tableau reçoit le focus.
<table><caption>Monthly sales in 2024</caption> ... </table>Cellules d’en-tête avec th et scope
Marquez les libellés avec th et un attribut scope afin que chaque valeur soit annoncée avec sa colonne et sa ligne. Ce contexte est essentiel dans un tableau.
<th scope="col">Sales</th>
<th scope="row">January</th>Le placer juste à côté du graphique
Placez le tableau de secours à côté du graphique, et non sur une page distincte. Les personnes doivent pouvoir accéder aux données sans avoir à les chercher.
Le masquer visuellement si nécessaire
Si le tableau alourdit la conception, masquez-le visuellement tout en le conservant pour les lecteurs d’écran avec une classe visuellement masquée, jamais avec display none.
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; }Ne jamais utiliser display none pour les données
Attention : display: none retire entièrement le contenu de l’arbre d’accessibilité. Masqué de cette manière, votre contenu de secours n’aide personne.
Un bouton details convient aussi
Entourez le tableau d’un élément details afin que les personnes voyantes puissent afficher les chiffres à la demande, tout en maintenant une accessibilité complète.
<details><summary>View data table</summary>
<table>...</table>
</details>Synchroniser le tableau et le graphique
Si le graphique est mis à jour, le tableau doit l’être aussi. Des chiffres obsolètes derrière un graphique récent induisent discrètement en erreur les personnes qui s’y fient.
Une source, deux représentations
Idéalement, le graphique et le tableau sont générés à partir des mêmes données. Ils restent ainsi cohérents et vous évitez de maintenir deux versions de la vérité. 🔗
Vérification rapide
Comment masquer un tableau de données que vous souhaitez tout de même rendre lisible par les lecteurs d’écran ?
Récapitulatif : les chiffres derrière l’image
Vous avez appris à associer tout graphique à un véritable tableau : muni d’une légende, d’en-têtes associés à leur portée, maintenu à jour et masqué correctement si nécessaire, jamais avec display none. 📋
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 30
- Leçons
- 120
Questions Fréquemment Posées
La leçon « La solution de repli sous forme de tableau de données » est-elle gratuite ?
Oui — le texte complet de « La solution de repli sous forme de tableau de données » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Web Accessibility Academy, passe à CoddyKit PRO. Le cours Web Accessibility Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « La solution de repli sous forme de tableau de données » ?
Présentez les nombres sous-jacents dans un tableau accessible. Tu pratiques Web Accessibility Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Web Accessibility Academy ?
Aucune expérience préalable n'est requise. Web Accessibility Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « La solution de repli sous forme de tableau de données » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Web Accessibility Academy ?
Oui. Chaque leçon Web Accessibility Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Chaque graphique a besoin d'une alternative textuelle
- La solution de repli sous forme de tableau de données
- Couleur, motif et libellés directs
- Graphiques interactifs navigables au clavier