Lignes directrices pour des infographies accessibles
Une infographie efficace permet de comprendre des informations complexes en un coup d'œil. Mais ce n'est qu'en tenant compte de l'accessibilité que cette information est utilisable par tous. Grâce aux WCAG 2.2 AA, vous ne laissez personne de côté : des personnes daltoniennes et malvoyantes aux personnes présentant des troubles cognitifs ou utilisant des lecteurs d'écran. Chez Animation Agency , nous traduisons quotidiennement ces directives en visuels clairs et inclusifs pour les secteurs de la santé et du gouvernement. Vous découvrez les infographies ? Consultez notre article « Qu'est-ce qu'une infographie ? »
Pourquoi rendre accessible et les WCAG en bref
Les infographies accessibles augmentent votre visibilité, améliorent l'expérience utilisateur et vous aident à maintenir une communication cohérente sur tous les canaux. C'est une obligation pour les organismes (semi-)gouvernementaux, mais cela présente des avantages pour toute organisation : moins de malentendus, une meilleure visibilité et une confiance accrue.
Les directives WCAG reposent sur quatre principes : perceptible, utilisable, compréhensible et robuste. Pour les infographies, cela signifie notamment : un contraste de couleurs suffisant, l’absence d’informations véhiculées uniquement par la couleur, une typographie claire, des alternatives textuelles pour les lecteurs d’écran et une conception technique compatible avec tous les appareils et technologies d’assistance. Visez le niveau AA des WCAG 2.2. Vous souhaitez garantir le respect des exigences d’accessibilité dès le départ ? Consultez alors le guide « Conseils pour une infographie ».
Conseils pratiques pour des infographies accessibles
Couleur et contraste
Utilisez la couleur à bon escient, sans jamais l'utiliser comme unique vecteur d'information. Combinez-la avec des motifs, des ombrages, des surlignages ou des étiquettes afin que les catégories restent reconnaissables même sans distinction de couleur. Maintenez un rapport de contraste minimal de 4,5:1 pour les textes courants et de 3:1 pour les textes de grande taille. Vérifiez également le contraste entre les éléments graphiques, tels que les lignes, les barres et leurs arrière-plans. Choisissez une palette de couleurs adaptée aux personnes daltoniennes et modérez l'utilisation des tons saturés. Attribuez une couleur différente aux états d'interaction et aux informations mises en évidence, en plus de leur attribuer une forme ou un style de trait distinct.
Typographie et hiérarchie
Choisissez une police sans empattement lisible avec une hauteur d'x suffisante. Assurez une hiérarchie visuelle claire avec des titres, sous-titres et étiquettes de taille uniforme. Conservez un espacement suffisant entre les lignes, d'environ 1,4 à 1,6. Évitez les majuscules et les espacements trop serrés. Pour une publication numérique, une taille minimale de 16 px est recommandée pour le corps du texte ; agrandissez les étiquettes des valeurs dans les graphiques afin qu'elles restent lisibles sur les appareils mobiles. Dans la mesure du possible, rédigez dans un langage simple et évitez le jargon ou expliquez-le brièvement dans la légende.
Alternatives et descriptions des textes
Ajoutez à chaque infographie un court texte alternatif qui résume son objectif et son message principal. Fournissez également une description ou un résumé détaillé à proximité de l'image. Publiez les données sous-jacentes dans un tableau accessible afin que les utilisateurs ne pouvant pas voir l'image puissent accéder à toutes les informations. Utilisez des titres et des sous-titres clairs qui explicitent le message, et pas seulement le sujet.
Formats interactifs et statiques
Dans la mesure du possible, publiez au format HTML ou SVG avec du texte brut afin que les lecteurs d'écran puissent lire les étiquettes et les valeurs. Assurez-vous que l'interaction au clavier est contrôlable et que les styles de focus sont visibles. Vous travaillez sur des versions interactives ? Consultez la page « Qu'est-ce qu'une infographie interactive ? ». Utilisez des infobulles accessibles et proposez les mêmes informations dans la mise en page fixe du graphique. Pour les PDF : balisez correctement les éléments, définissez correctement l'ordre de lecture et testez avec un lecteur d'écran. Fournissez toujours une alternative sans animation ni contrainte de temps. Vous hésitez sur l'impact des légers mouvements ? Consultez la page « Animation d'infographie : qu'est-ce que c'est ? ». Envisagez des mouvements subtils tels que les micro-animations et respectez les préférences de chacun en matière de mouvement. Vous publiez des informations sous forme de vidéo ? Consultez la page « Qu'est-ce qu'une infographie vidéo » pour obtenir des conseils sur les sous-titres, les transcriptions et l'audiodescription.
Rendre les informations complexes claires, compréhensibles et convaincantes
Liste de contrôle des infographies accessibles
- Objectif et contenu principal - Formulez un message principal et explicitez-le dans le titre et l'introduction.
- Couleurs et motifs - Aucune information ne doit être transmise uniquement par la couleur ; utilisez des motifs et des étiquettes.
- Contraste - Vérifiez 4,5:1 pour le texte, 3:1 pour les grands textes et les éléments graphiques.
- Typographie - Polices lisibles, taille et espacement suffisants, choix de mots de niveau B1.
- Étiquettes et légende - Placez les étiquettes près des données et rédigez la légende clairement.
- Texte alternatif : Bref résumé de l’objectif et du résultat, plus une description détaillée.
- Alternative aux données : proposer un tableau accessible ou un téléchargement de données.
- Technique - HTML/SVG avec texte réel, accessibilité au clavier, mise au point correcte.
Aide pour les visuels accessibles
Vous souhaitez que votre infographie soit conforme aux normes WCAG sans en compromettre l'impact ? Animation Agency accompagne les organismes de santé et les administrations publiques dans la création de visualisations claires et inclusives. Nous travaillons avec un langage clair (niveau B1), des contrastes de couleurs marqués, des sous-titres et une audiodescription lorsque cela est pertinent. Contactez-nous pour des conseils ou la production de votre infographie, ou consultez notre portfolio pour découvrir des études de cas et des bonnes pratiques.
Foire aux questions
Votre question ne figure pas dans la liste ? N'hésitez pas à la poser.
Posez votre questionOui. En n'utilisant pas la couleur comme seul élément de communication, en employant un contraste suffisant, en ajoutant des étiquettes et des motifs, en choisissant une typographie claire et en fournissant du texte alternatif et des tableaux de données, vous rendez les infographies accessibles à tous. Le HTML ou le SVG avec du texte et une accessibilité au clavier complètent cela. N'utilisez l'animation que si elle soutient l'information et ne crée pas d'obstacles.
Décrivez le périmètre de votre site ou publication, son niveau de conformité aux WCAG 2.2, les lacunes connues et justifiées, les dérogations éventuelles et un plan d'amélioration assorti d'un calendrier. Indiquez la date, l'organisme responsable et la personne à contacter. Mettez à jour cette déclaration régulièrement en cas de modifications.
Une bonne infographie présente un message clair, une hiérarchie logique, une utilisation judicieuse des couleurs, des légendes claires à proximité des données et un titre court et informatif. Des exigences supplémentaires s'appliquent pour l'accessibilité : contraste suffisant, absence de codage couleur seul, texte de niveau B1, texte alternatif et tableau de données complet.
Prêt à passer de A à AA ?
Qu’il s’agisse d’une ambition, d’un produit, d’un processus, d’une technologie ou d’une idée : nous rendons visible ce qui le rend spécial et le traduisons en images claires, convaincantes et impossibles à ignorer.