Considérations d'accessibilité pour les diagrammes, les graphiques et les infographies
Les diagrammes et les graphiques sont un excellent moyen de représenter visuellement les données. Que vous utilisiez un graphique linéaire, un graphique à barres ou un graphique à secteurs, il ne fait aucun doute que ces éléments de contenu peuvent aider à brosser un tableau clair des données en question.
Que se passe-t-il, cependant, lorsqu'une personne malvoyante ou daltonienne tente de lire les informations du graphique et n'y parvient pas ? Étant donné que les tableaux et les graphiques sont généralement créés avec des couleurs unies, cela pourrait être difficile à consommer pour certaines personnes. Comment pouvons-nous nous assurer que nos tableaux et graphiques sont conçus de manière à inclure ceux qui sont incapables de percevoir les couleurs ? Et qu'en est-il des personnes légalement aveugles qui ne peuvent pas du tout voir l'image ?
Examinons quelques options pour nous assurer que les images complexes que nous concevons pour représenter les données sont disponibles pour tout le monde.
Tableaux et graphiques
Augmenter la visibilité des graphiques
Nous pouvons faire certaines choses pour rendre nos tableaux et graphiques plus accessibles aux personnes malvoyantes ou daltoniennes :
-
Des étiquettes claires , qui sont placées sur le graphique de manière à indiquer quelle ligne, barre ou part de tarte est responsable de quelle donnée, peuvent être utiles.
L'idée est de prendre la légende qui serait sur le côté et de placer l'étiquette directement près du point de données en question. De cette façon, si quelqu'un utilise un logiciel de zoom, il n'aura pas à faire des allers-retours entre le graphique et la légende pour établir la connexion.
-
Les formes et les textures peuvent être utilisées pour distinguer visuellement les lignes colorées ou les secteurs dans un graphique.
Avec les textures, quelqu'un qui pourrait ne pas être capable de percevoir la couleur pourra différencier les points de données. Les textures doivent également être définies dans le cadre de la légende, afin de faire le lien entre le graphique et l'étiquette.
Essais rapides
Afin de voir à quel point votre tableau peut être facile ou difficile à lire pour une personne daltonienne, voici deux exercices que vous pouvez effectuer comme test :
- Utilisez l' extension NoCoffee Chrome pour simuler différents degrés de daltonisme. Votre tableau ou graphique est-il facile ou difficile à comprendre ?
- Si vous le pouvez, imprimez votre carte en noir et blanc. Encore une fois, vérifiez si les points de données et les informations sont lisibles et compréhensibles.
Le but ici est de s'assurer que le contenu est consommable et que les informations sur votre site sont indépendantes de la couleur.
Ajout d'alternatives textuelles
Pour les personnes légalement aveugles qui utilisent un logiciel de lecture d'écran, il est idéal de fournir une alternative textuelle à vos données.
Une alternative textuelle pour un tableau ou un graphique est généralement mise à disposition à l'aide d'un table HTML , produisant les données dans une structure tabulaire. Cela permet à une personne utilisant une technologie d'assistance de comprendre les données sans s'appuyer sur le tableau visuel ou le graphique.
Par exemple, consultez les tableaux et les graphiques de l' enquête sur les utilisateurs de lecteurs d'écran WebAIM . Remarquez comment chaque graphique est accompagné d'un table HTML avec le même contenu mis à la disposition des utilisateurs de lecteurs d'écran ou de toute autre personne qui préfère lire les données de cette manière.
Bibliothèques de graphiques
Il convient de noter que des bibliothèques de graphiques telles que D3.js et Highcharts sont disponibles. Ces bibliothèques prennent des données brutes et créent des tableaux et des graphiques en temps réel lors du chargement de la page. L'inconvénient de l'utilisation de ces bibliothèques est qu'elles ne sont peut-être pas très accessibles et que la consommation des données peut être difficile pour certains.
Par exemple, lors de l'ajout du module Highcharts Accessibility , les graphiques sont compatibles avec le clavier, mais lorsque vous tentez d'interagir avec les données tout en exécutant un lecteur d'écran, les données peuvent être difficiles à consommer. Pour cette raison, il est conseillé d'avoir les mêmes données disponibles dans un table HTML comme alternative.
Infographie
Si vous n'êtes pas familier, une infographie est généralement une grande image avec des informations ou des données intégrées dans l'image. L'attrait est que le concepteur peut partager beaucoup de données d'une manière intéressante, accrocheuse et colorée. La méthode est efficace; il y a une raison pour laquelle Facebook permet aux utilisateurs d'ajouter de la couleur aux messages - comme une méthode pour attirer l'attention des gens tout en faisant défiler leur flux.
Problèmes d'accessibilité
En règle générale, cette approche pose un certain nombre de problèmes qui doivent être résolus lors de la publication d'une infographie :
- S'assurer que le contraste des couleurs est suffisant pour que le contenu du texte soit lu sur le fond
- Fournir une alternative textuelle pour toutes les données intégrées dans l'image
- Permettre au texte de s'adapter au zoom
Contraste des couleurs
Afin de respecter les règles de contraste des couleurs définies par le W3C, utilisez un sélecteur de couleurs pour saisir les valeurs de couleur afin de tester la couleur du texte par rapport à quelques pixels qui apparaissent à proximité du texte. Utilisez un outil de contraste des couleurs pour déterminer si les couleurs réussissent ou échouent le test afin de vous assurer que le contenu du texte est lisible.
Si la couleur du texte et de l'arrière-plan échoue et que les valeurs de couleur ne peuvent pas être modifiées, envisagez d'ajouter une border ou drop-shadow au texte. Cela augmentera la lisibilité du contenu du texte sans ajuster les couleurs réelles de l'infographie.
Fournir une alternative textuelle
Étant donné qu'une infographie est généralement une image HTML, il peut être tentant d'ajouter tout le contenu présenté dans l'image dans l'attribut alt . Comme nous l'avons appris dans le texte alternatif, insérer trop de contenu dans l'attribut alt peut être assez fastidieux et accablant pour certains utilisateurs.
À un moment donné, il y avait l'attribut longdesc . Cet attribut devait être ajouté aux éléments img afin d'établir une connexion avec plus de contenu décrivant l'image. C'était une bonne idée, mais une prise en charge et une implémentation médiocres par les fournisseurs de navigateurs ont depuis rendu l' attribut longdesc obsolète .
Quelle est la meilleure approche pour fournir une alternative textuelle aux images contenant du texte et contenant beaucoup de données ? Affichez simplement le texte sur la même page près de l'image. Avec les données en texte brut à proximité de l'image, les utilisateurs de lecteurs d'écran aveugles ou malvoyants pourront facilement consommer les données, les personnes facilement distraites par des images colorées pourront se concentrer sur le texte brut et rechercher les moteurs pourront également indexer le contenu. Tout le monde gagne !
Critères de réussite WCAG
Cela revient à 1.1.1 Contenu non textuel qui stipule :
"Tout le contenu non textuel qui est présenté à l'utilisateur a une alternative textuelle qui sert un objectif équivalent."