Temps de lecture estimé : 6 min · Publié le
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.
| Période proposée | Valeur pédagogique | Lecture à préserver |
|---|---|---|
| Période A | 10 unités | Valeur connue au début de l’exemple. |
| Période B | 0 unité | Zéro effectivement observé, à conserver dans le tableau. |
| Période C | Inconnue | Aucune valeur observée ; ne pas remplacer par zéro. |
| Période D | 15 unités | Dernière valeur connue ; elle ne prouve pas une progression continue. |
- W3C WAI : Images complexes
Consulté le 22 octobre 2026 ; description courte et représentation textuelle des informations essentielles d’un graphique.
- W3C WCAG 2.2 : Utilisation de la couleur
Consulté le 22 octobre 2026 ; information visuelle complémentaire à la couleur. Les valeurs du tableau sont fictives.
Tester couleurs, échelles et écrans
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.
| Élément | Repère visible | Contrôle |
|---|---|---|
| Série A pédagogique | Trait plein, ronds et lettre A | Reconnaissable sans couleur |
| Série B pédagogique | Trait discontinu, carrés et lettre B | Distincte de A sans reconnaître une teinte |
| Texte des axes et libellés | Contrôle de contraste du texte | Ne pas appliquer automatiquement le seuil graphique au texte |
| Partie graphique nécessaire | Contraste avec les couleurs adjacentes | Appliquer 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
- conseils du W3C sur les images complexes · Source consultée
- W3C : Understanding 1.4.11 Non-text Contrast · Source consultée
- W3C : Understanding 1.4.1 Use of Color · Source consultée
- W3C : G111 Using color and pattern · Source consultée
Contenu mis à jour le
Repères documentaires pour ce sujet
| Référence | Valeur ou syntaxe | Portée du repère |
|---|---|---|
| WCAG 2.2 · 1.4.3 | 4.5:1 / 3:1 | Texte courant / grand texte (18 pt ou 14 pt gras) ; exceptions prévues par le critère. |
| WCAG 2.2 · 1.4.10 | 320 CSS px | Contenu 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é.
