Les graphiques interactifs permettent de transformer les données en récits captivants, offrant ainsi des informations précieuses en un clin d'œil. Mais que se passe-t-il lorsque ces outils visuels ne sont pas accessibles aux personnes malvoyantes ? Dans cet article, nous allons vous montrer comment vous assurer que vos graphiques interactifs sont accessibles à tous les utilisateurs, quelles que soient leurs capacités.
Avant d'aller plus loin, précisons ce que nous entendons par « graphique interactif ». Les graphiques interactifs permettent aux utilisateurs de modifier l'apparence du graphique à l'aide de différentes commandes. Par exemple, une page servant à suivre le trafic d'un site — où la modification de la plage de dates modifie l'affichage — est un graphique interactif. En revanche, une page affichant les notes des élèves que l'utilisateur ne peut pas modifier est un graphique statique.
Vous trouverez ci-dessous quelques bonnes pratiques pour rendre vos graphiques interactifs accessibles et garantir que tous les utilisateurs, y compris ceux en situation de handicap, puissent interagir avec les informations et les comprendre.
Choisissez des bibliothèques de graphiques dotées de fonctionnalités d'accessibilité intégrées
Les bibliothèques de graphiques accessibles sont généralement conçues pour répondre par défaut aux besoins des personnes en situation de handicap, et elles abordent l'accessibilité en mettant l'accent sur la personnalisation et l'utilisation au clavier. Par exemple, Highcharts, Recharts et Google Charts offrent toutes des fonctionnalités de personnalisation et de prise en charge de l'accessibilité.
Garantir une navigation au clavier fluide parmi les éléments interactifs
Pour personnaliser la visualisation des données, les graphiques interactifs s'appuient sur des éléments interactifs tels que des boutons, des curseurs et des points de données qui décrivent les données à un moment donné à l'aide d'infobulles. Ces éléments interactifs doivent pouvoir être actionnés et sélectionnés à l'aide du clavier seul. Il est également essentiel de disposer d'un indicateur de sélection clair et visible pour ces éléments interactifs, afin que les utilisateurs qui se servent uniquement du clavier sachent où se trouve le curseur et puissent suivre l'ordre de tabulation.
L'ordre de tabulation désigne la séquence dans laquelle les éléments d'une page Web, d'un formulaire ou d'une interface logicielle sont sélectionnés lors de la navigation à l'aide de la touche Tab. L'ordre de tabulation aide les utilisateurs, en particulier ceux qui utilisent un clavier ou des technologies d'assistance, à parcourir les éléments interactifs dans un ordre logique et intuitif. Par exemple, sur l'image ci-dessus, on peut voir les numéros indiquant comment le focus doit se déplacer pour les utilisateurs qui utilisent uniquement le clavier.
Améliorer la compatibilité avec les lecteurs d'écran
Toute information qu'un utilisateur voyant peut tirer d'un graphique doit être accompagnée de descriptions textuelles décrivant les relations entre les différents points de données ainsi que toute autre information perçue par un utilisateur voyant. Tous les éléments interactifs doivent être nommés afin que les utilisateurs de lecteurs d'écran puissent identifier ces éléments et comprendre leur fonction. Vous devez toujours privilégier l'utilisation d'éléments HTML natifs. Toutefois, si vous utilisez des éléments personnalisés, vous pouvez recourir à ARIA (Accessible Rich Internet Applications) pour attribuer des rôles, des propriétés et des états permettant de décrire la structure du graphique, les éléments interactifs et les données aux lecteurs d'écran.
Vous devez également vous assurer que chaque élément interactif et chaque image comportent les éléments suivants afin de permettre aux lecteurs d'écran de comprendre les données présentées :
- Des titres et des libellés descriptifs pour tous les éléments du graphique
- Résumés ou descriptions de l'objectif du graphique et de ses principales conclusions
- Des infobulles et des valeurs de données accessibles, pouvant être parcourues à l'aide du clavier et lues par les lecteurs d'écran
Aborder la question du contraste des couleurs et de l'utilisation de la couleur seule pour transmettre des informations
Les utilisateurs daltoniens risquent de ne pas comprendre le sens des données présentées dans votre graphique si les motifs reposent uniquement sur des couleurs. Vous devez donc veiller aux rapports de contraste entre les couleurs de premier plan et d'arrière-plan. Le rapport de contraste minimum est de 3:1, mais un rapport de 4,5:1 offrira une ergonomie encore meilleure. Lorsque du texte est affiché sur un arrière-plan, les directives WCAG exigent un rapport de 4,5:1.
Vous pouvez également utiliser différents schémas de présentation des données au lieu de vous limiter aux seules couleurs. Par exemple, des graphiques interactifs comportant des étiquettes de données permettent à tous les utilisateurs de comprendre clairement ce que représente chaque barre d’un graphique. Si cela n’est pas possible, vous devriez au moins fournir une description textuelle pour chaque élément du graphique, afin que les utilisateurs daltoniens ou malvoyants puissent eux aussi vivre le même moment de « révélation » que les autres utilisateurs.
Conclusion
En suivant ces bonnes pratiques, vous pouvez vous assurer que vos graphiques interactifs sont accessibles à tous les utilisateurs, y compris ceux en situation de handicap. Commencez dès aujourd’hui à évaluer l’accessibilité de vos graphiques, et n’oubliez pas que l’inclusivité est essentielle pour une communication efficace des données.
Si vous souhaitez bénéficier d'une assistance pour adapter vos graphiques et les rendre accessibles à tous vos utilisateurs, n'hésitez pas à contacter Deque dès aujourd'hui!
