Rechercher
Saisissez au moins deux caractères, sans donnée personnelle.

    BibliothèqueArticles et FAQ Votre projetDemander un devis
    LangueFR
    Guides pratiques

    Rendre les graphiques et tableaux compréhensibles

    Un graphique facilite une comparaison seulement si le lecteur peut retrouver ce que montrent les axes, les valeurs et les différences. La légende ne doit pas porter toute l’explication.

    Voir la méthode

    Illustration de la préparation d’un projet web : Rendre les graphiques et tableaux compréhensibles

    Commencer par la question que les données éclairent

    Énoncez la décision ou la question avant de dessiner. Comparez-vous une évolution, une répartition ou quelques valeurs ? Choisissez une forme qui rend cette relation visible et gardez un tableau lorsque la lecture exacte de chaque chiffre est plus importante que la tendance.

    Indiquez le périmètre, les unités, la période et la source près de la figure. Un pourcentage sans dénominateur ou une courbe dont l’axe commence ailleurs que prévu peut induire en erreur. Le guide de mesure aide à interpréter les indicateurs avant publication.

    • Question et unité explicites.
    • Source et période visibles.
    • Graphique choisi pour la relation à montrer.

    Offrir une description utile hors de l’image

    Donnez au visuel un texte alternatif court qui identifie le sujet. Pour un graphique complexe, ajoutez une description longue visible à tous ou un tableau de valeurs. Mentionnez les tendances, écarts et exceptions nécessaires pour comprendre la conclusion.

    Les conseils du W3C sur les images complexes distinguent description courte et information détaillée. Une suite de valeurs dans un attribut alt devient pénible à écouter ; une structure HTML peut mieux servir la lecture.

    Exemple fictif : quatre périodes A, B, C et D portent respectivement 10, 0, une valeur inconnue et 15 unités. Le zéro de B est une mesure ; l’absence de C ne l’est pas. Ne dessinez pas un point à zéro pour C et ne reliez pas silencieusement les périodes comme si toutes avaient été observées. Le texte doit expliquer la lacune, en plus des valeurs disponibles.

    Une description utile indique ici que la dernière valeur connue dépasse la première de 5 unités, mais que la série ne démontre pas une hausse continue : B vaut zéro et C manque. Associez libellés ou marqueurs aux séries au lieu de transmettre leur identité uniquement par la couleur. La description et le tableau de valeurs restent consultables hors de l’image ; ils ne doivent pas dépendre du survol d’un point.

    • Sujet annoncé dans l’alternative.
    • Valeurs et tendances disponibles en texte.
    • Description longue structurée si nécessaire.

    Faites défiler le tableau horizontalement pour lire toutes les colonnes. Au clavier, placez le focus sur le tableau puis utilisez les flèches.

    Exemple fictif : garder un zéro distinct d’une observation manquante
    Période proposéeValeur pédagogiqueLecture à préserver
    Période A10 unitésValeur connue au début de l’exemple.
    Période B0 unitéZéro effectivement observé, à conserver dans le tableau.
    Période CInconnueAucune valeur observée ; ne pas remplacer par zéro.
    Période D15 unitésDernière valeur connue ; elle ne prouve pas une progression continue.

    Tester couleurs, échelles et écrans

    Légende pédagogique monochrome : A en trait plein avec ronds, B en trait discontinu avec carrés.
    Illustration · Les deux séries fictives sont distinguées par lettres, formes et traits, sans dépendre d’une teinte. Aucun axe ni valeur n’est représenté : ce schéma montre une convention de légende, pas des données mesurées.

    N’utilisez pas la couleur comme seul moyen de distinguer les séries. Ajoutez libellés, motifs ou marqueurs, puis vérifiez le contraste. Sur téléphone, contrôlez la lisibilité des axes et la possibilité de consulter les valeurs sans zoom horizontal incessant.

    Un tableau doit garder des en-têtes associés aux cellules, même lorsque la présentation devient étroite. Si vous simplifiez un graphique sur mobile, ne supprimez pas une série essentielle. Le guide d’accessibilité propose des essais clavier et zoom.

    Ne confondez pas le contraste d’un libellé et celui d’un élément graphique. Le critère WCAG 1.4.11 demande 3:1, sous ses conditions et exceptions, pour les parties graphiques nécessaires à la compréhension par rapport aux couleurs adjacentes. Cela ne ramène pas automatiquement le texte courant à 3:1 : il garde son contrôle propre. Un gris #777777 sur blanc peut donc dépasser 3:1 sans atteindre 4,5:1. Relevez ce que l’élément permet d’identifier avant de choisir le contrôle.

    Dans le schéma pédagogique, A utilise un trait plein et des ronds ; B un trait discontinu et des carrés. Les deux restent de la même couleur et portent leur lettre : la légende peut être rapprochée des séries sans reconnaître une teinte. Ce schéma illustre des marqueurs, pas une série de mesures. Pour un vrai graphique, conservez aussi les valeurs et leur description hors de l’image. Un passage en niveaux de gris aide à repérer une dépendance à la couleur, mais ne remplace ni le calcul de contraste ni les autres contrôles de lecture.

    • Séries distinctes sans couleur.
    • Axes lisibles sur mobile.
    • En-têtes du tableau compréhensibles.

    Faites défiler le tableau horizontalement pour lire toutes les colonnes. Au clavier, placez le focus sur le tableau puis utilisez les flèches.

    Séries et libellés : choisir des contrôles complémentaires
    ÉlémentRepère visibleContrôle
    Série A pédagogiqueTrait plein, ronds et lettre AReconnaissable sans couleur
    Série B pédagogiqueTrait discontinu, carrés et lettre BDistincte de A sans reconnaître une teinte
    Texte des axes et libellésContrôle de contraste du texteNe pas appliquer automatiquement le seuil graphique au texte
    Partie graphique nécessaireContraste avec les couleurs adjacentesAppliquer 1.4.11 selon le rôle et ses exceptions

    Vérifier les chiffres dans la durée

    Nommez la source, la date de collecte, la méthode et la personne responsable. Lorsqu’une donnée change, vérifiez le titre, la conclusion, le tableau et les versions traduites. Une capture de graphique peut rester sur un article alors que la base a été corrigée.

    Testez également les téléchargements éventuels : format réutilisable, intitulés de colonnes et absence de données qui ne devraient pas être publiées. Une figure claire ne compense pas un calcul erroné ; faites relire les valeurs avant diffusion.

    • Source et calcul revus.
    • Copies et traductions mises à jour.
    • Fichiers téléchargeables contrôlés.

    Un pourcentage garde son dénominateur

    Indiquez le nombre de cas, la population et la période à proximité du graphique. Une absence de donnée doit rester distincte de zéro. Pour une comparaison avant/après, conservez la même unité et expliquez tout changement de collecte ; une barre plus haute ne suffit pas à démontrer une amélioration.

    Documents de référence

    Contenu mis à jour le

    Repères documentaires pour ce sujet

    Repères documentaires pour ce sujet
    RéférenceValeur ou syntaxePortée du repère
    WCAG 2.2 · 1.4.3
    4.5:1 / 3:1Texte courant / grand texte (18 pt ou 14 pt gras) ; exceptions prévues par le critère.
    WCAG 2.2 · 1.4.10
    320 CSS pxContenu vertical sans défilement dans deux dimensions ; exceptions pour les contenus intrinsèquement bidimensionnels.

    Les dates indiquent la consultation des références. Ces repères ne constituent ni un audit du site ni une déclaration globale de conformité.

    Matrice de recette à adapter au projet

    Ces contrôles proposés utilisent des cas fictifs. Décidez du comportement attendu avec l’équipe, notez le résultat et attribuez les écarts non résolus avant publication.

    Faites défiler le tableau horizontalement pour lire toutes les colonnes. Au clavier, placez le focus sur le tableau puis utilisez les flèches.

    Cas de test, résultats attendus et preuves utiles
    CasRésultat attenduPreuve à conserver
    Une série contient une valeur manquante.L’absence est indiquée et ne devient pas un point à zéro.Valeur absente dans la source, libellé correspondant et représentation dans le graphique et le tableau.
    Deux périodes utilisent des périmètres différents.Le graphique signale la rupture et ne présente pas la variation comme une évolution comparable.Définitions des deux séries et annotation de rupture visible.

    Questions fréquentes

    Comment expliquer des données manquantes dans un graphique ?

    Définissez séparément zéro, donnée inconnue et donnée non applicable, puis rendez ces états lisibles dans la légende ou le tableau associé. Conservez source, période et unité avec les valeurs. Pour une série interrompue, évitez de relier les points comme si une mesure existait. Ajoutez une phrase qui décrit le constat principal et ce que les données disponibles ne permettent pas de conclure.

    Pourquoi une hausse du volume peut-elle accompagner une baisse du taux ?

    Exemple fictif : 12 résultats sur 100 demandes donnent 12 %, puis 18 sur 300 donnent 6 %. Le volume augmente de 6, mais le taux baisse de 6 points de pourcentage. Le graphique et son tableau doivent préciser ce qui est représenté, la période et le dénominateur. Ces chiffres décrivent deux relevés ; ils ne prouvent pas à eux seuls la cause de la variation.