Graphiques / diagrammes statistiques accessibles
Découvrez ci-dessous les principales exigences auxquelles doivent répondre les graphiques statistiques accessibles, à l'aide de quelques comparaisons entre des exemples plus accessibles et des exemples moins accessibles.
Les exigences thématisées dans les exemples concernent principalement les besoins des personnes souffrant d'une multitude de déficiences visuelles différentes, telles qu'une acuité visuelle limitée, une vision tunnel ou un daltonisme.
Les exigences en matière de graphiques et d'illustrations complexes pour les non-voyants sont traitées plus loin dans l'onglet accordéon "Alternatives textuelles".
En bref
![](/de/die-eth-zuerich/lehre/e-accessibility/faq-quick-wins/statistical-charts/_jcr_content/par/textimage_1534988544/image.imageformat.textdouble.58460312.png)
Lors de la création de graphiques et de diagrammes statistiques accessibles, il convient de prêter une attention particulière à trois aspects.
- Veillez à ce que les contrastes entre la représentation des données (points, lignes, surfaces) et le fond respectif des graphiques soient bien visibles.
- WCAG : 1.4.3 Contrastes (page externehttps://www.w3.org/TR/WCAG21/#contrast-minimum)
- ?vitez que l'attribution entre les données représentées et les éventuelles légendes ne soit donnée que par la couleur. Utilisez différents symboles, hachures ou motifs pour représenter les données. Il est en outre recommandé d'inscrire les données, même en plus des éventuelles légendes, directement dans les graphiques ou sur leurs axes.
- WCAG : 1.4.1 Utilisation des couleurs (page externehttps://www.w3.org/TR/WCAG21/#use-of-color)
- Prévoyez toujours des alternatives textuelles pour vos graphiques statistiques, qui décrivent explicitement les informations les plus importantes des graphiques. Vous trouverez plus d'informations sur les alternatives textuelles appropriées dans l'onglet en accordéon "Alternatives textuelles". Dans la mesure du possible, mettez également à la disposition de vos lecteurs la base de données correspondante, par exemple sous forme de tableau accessible.
- WCAG : 1.1.1 Contenu non textuel (page externehttps://www.w3.org/TR/WCAG21/#non-text-content)
Vous trouverez les bases et les connaissances de base relatives aux how-tos présentés ici sous Les bases de l'e-Accessibilité et dans notre Cours Moodle.
Exemples
Ci-dessous, nous comparons pour vous des diagrammes statistiques typiques souvent vus avec leurs versions plus accessibles.
Bar charts / Diagrammes à barres
Les diagrammes à barres sont un exemple typique de graphiques où les légendes des différentes représentations de données sont souvent réalisées à l'aide de légendes.
Exemple peu accessible
Cet exemple enfreint à deux égards les directives internationales pour les contenus électroniques accessibles WCAG. Les couleurs des barres sont peu contrastées et difficiles à distinguer les unes des autres. Le lien entre les différentes barres et les légendes correspondantes se fait uniquement par le biais de leurs couleurs. De plus, il faut noter que les légendes sont en général un peu petites.
![Exemple . Diagramme à barres, peu accessible](/de/die-eth-zuerich/lehre/e-accessibility/faq-quick-wins/statistical-charts/_jcr_content/par/image_1914893262/image.imageformat.1286.2034199320.png)
Exemples plus accessibles
Cette version, un peu plus triste, mais plus accessible et plus facile à imprimer, répond aux directives concernant les contrastes et l'utilisation des couleurs. Non seulement les barres se distinguent bien et peuvent être attribuées aux légendes correspondantes. Les barres sont également toutes étiquetées directement et les inscriptions sont un peu plus grandes.
![Exemple . Diagramme à barres avec hachures Noir et blanc, axe des x étiqueté](/de/die-eth-zuerich/lehre/e-accessibility/faq-quick-wins/statistical-charts/_jcr_content/par/image_754973980/image.imageformat.1286.2090957392.png)
En outre, les différentes barres sont directement étiquetées sur l'axe x et même accompagnées de leurs valeurs respectives (axe y).
L'inscription des différentes barres et le lien entre les modèles de barres et la légende sont redondants. Il serait donc possible de renoncer complètement à la légende.
La représentation reste accessible même si les barres sont colorées en plus des hachures :
![Exemple . Diagramme à barres avec hachures, légende, couleurs.](/de/die-eth-zuerich/lehre/e-accessibility/faq-quick-wins/statistical-charts/_jcr_content/par/image_1445539004/image.imageformat.1286.2085793366.png)
Les mêmes techniques peuvent être appliquées à d'autres types de diagrammes. Voir les diagrammes de surface (plus bas).
Scatterplots / diagrammes de dispersion
Dans les diagrammes de dispersion, différentes séries de données sont souvent représentées sur une surface de dessin à des fins de comparaison directe. Les points de données des différentes séries de données se distinguent uniquement par leur couleur et ne peuvent être distingués les uns des autres d'aucune autre manière.
Exemple peu accessible
Dans l'exemple ci-dessous, les points rouges et bleus sont difficiles à distinguer pour de nombreuses personnes ayant une mauvaise perception des couleurs et des contrastes.
![Exemple. Diagramme de dispersion, difficilement accessible, rouge-bleu](/de/die-eth-zuerich/lehre/e-accessibility/faq-quick-wins/statistical-charts/_jcr_content/par/image_1218267346/image.imageformat.1286.1729006273.png)
Exemple plus accessible
Au lieu d'être représentés par des couleurs, les points de données des différentes séries de données sont distingués les uns des autres au moyen de symboles. Bien entendu, les points de données peuvent être colorés en plus de leur représentation sous forme de différents symboles, tant que le contraste avec l'arrière-plan reste suffisant.
![Exemple. Diagramme de dispersion, séries de données avec différents symboles](/de/die-eth-zuerich/lehre/e-accessibility/faq-quick-wins/statistical-charts/_jcr_content/par/image_1384733807/image.imageformat.1286.608464269.png)
Line charts / Graphiques linéaires
Des techniques similaires à celles utilisées pour les diagrammes de dispersion peuvent également être appliquées aux diagrammes linéaires. Au lieu d'utiliser des couleurs pour distinguer les différentes séries de données, il est possible d'utiliser différents types de lignes à cette fin.
Exemple peu accessible
![Exemple. Graphique linéaire, peu accessible, trois couleurs avec légende.](/de/die-eth-zuerich/lehre/e-accessibility/faq-quick-wins/statistical-charts/_jcr_content/par/image_1447148296/image.imageformat.1286.1039209419.png)
Exemple plus accessible
![Exemple de fonctionnement. Diagramme linéaire, symboles et types de lignes avec légende.](/de/die-eth-zuerich/lehre/e-accessibility/faq-quick-wins/statistical-charts/_jcr_content/par/image_2026373607/image.imageformat.1286.1448661891.png)
Surface Area Plots / Diagrammes de surface
Pour les diagrammes de surface, les problèmes sont similaires à ceux des diagrammes à barres. Principalement le lien entre les représentations des surfaces sur la surface du dessin et les légendes correspondantes par la couleur seule.
Exemple peu accessible
![Exemple de graphique. Diagramme de surface, peu accessible, couleurs avec légende](/de/die-eth-zuerich/lehre/e-accessibility/faq-quick-wins/statistical-charts/_jcr_content/par/image_1379404901/image.imageformat.1286.1602808392.png)
Exemples plus accessibles
Une technique permettant d'éviter ces barrières typiques consiste à utiliser des motifs pour identifier les différentes surfaces.
![Exemple de graphique. Diagramme de surface, avec hachures, légende, couleurs](/de/die-eth-zuerich/lehre/e-accessibility/faq-quick-wins/statistical-charts/_jcr_content/par/image_650921891/image.imageformat.1286.1134935712.png)
D'autres techniques consistent à placer les libellés des différentes surfaces directement dans la zone de dessin.
Il faut en outre veiller à ce que les différentes surfaces soient délimitées par des lignes contrastées et restent ainsi reconnaissables même pour les personnes ayant une acuité visuelle réduite.
![Exemple de diagramme. Diagramme de surface, avec couleurs, labels sur surface de dessin](/de/die-eth-zuerich/lehre/e-accessibility/faq-quick-wins/statistical-charts/_jcr_content/par/image_481142934/image.imageformat.1286.985609827.png)
Il va de soi que des versions imprimables en nuances de gris sont également autorisées dans un souci d'accessibilité.
![Exemple de graphique. Diagramme de surface, avec labels sur la surface de dessin, niveaux de gris](/de/die-eth-zuerich/lehre/e-accessibility/faq-quick-wins/statistical-charts/_jcr_content/par/image_352253426/image.imageformat.1286.559140070.png)
Attributions schématiques
Les représentations schématiques de l'attribution des sièges ou des places constituent un type particulier de diagrammes graphiques. Souvent dans le cadre de systèmes de réservation, où par exemple les places encore libres sont marquées en vert et les places vendues en rouge. Ou des catégories de prix. Ci-dessous, à titre d'exemple, la composition du Conseil national suisse par groupes politiques.
Exemple peu accessible
Les groupes politiques ne sont reliés aux noms des groupes respectifs que par les couleurs des différents sièges (disques circulaires). Les contrastes entre les couleurs sont parfois trop mauvais pour pouvoir les distinguer.
![Exemple. représentation schématique du Conseil national suisse, difficilement accessible, couleurs avec légende](/de/die-eth-zuerich/lehre/e-accessibility/faq-quick-wins/statistical-charts/_jcr_content/par/image_1284471866/image.imageformat.1286.161600347.png)
Exemple plus accessible
Les fractions voisines ne se distinguent pas seulement par la couleur, mais aussi par le fait que certains sièges sont représentés sous forme de disques circulaires remplis et d'autres sous forme de cercles avec un remplissage blanc. L'attribution à la désignation des fractions respectives ne se fait pas par une légende, mais par des inscriptions à proximité immédiate des sièges représentés.
![Exemple : représentation schématique du Conseil national suisse, inscription directe des groupes, description dans le texte.](/de/die-eth-zuerich/lehre/e-accessibility/faq-quick-wins/statistical-charts/_jcr_content/par/image_663936054/image.imageformat.1286.564882252.png)