Accessibilité numérique: comment faire des graphiques interactifs accessibles ?

Les graphiques interactifs peuvent transformer les données brutes en histoires convaincantes, offrant des informations précieuses en un coup d'œil. Mais, que se passe-t-il lorsque ces outils visuels sont inaccessibles à ceux qui ont des déficiences visuelles ou motrices ?

En effet, un utilisateur avec une déficience visuelle devra se reposer sur un lecteur d'écran, comme NVDA ou VoiceOver pour les terminaux de bureau, Talkback ou VoiceOver pour les terminaux mobiles, Jaws et Narrateur sur environnement PC, restituant vocalement un contenu, qu'il ne peut pas voir (ou moins bien). De même, un utilisateur avec une déficience motrice devra se reposer sur le clavier, pour naviguer un contenu, qu'il ne peut pas parcourir avec une souris par exemple.
‍

Nous allons vous expliquer comment garantir que vos graphiques interactifs soient accessibles à tous les utilisateurs, quelles que soient leurs capacités. Avant tout, définissons plus précisément ce qu'est un graphique interactif.
Un graphique interactif permet aux utilisateurs de modifier, par exemple, son apparence via différents contrôles, comme dans le cas d’un outil de suivi du trafic d’un site web où le changement de la plage de dates actualise la vue. Contrairement à un graphique statique qui, tel qu’un tableau affichant des résultats d’examen non manipulables, reste figé.‍

Comment choisir une bibliothèque de graphique dotée de fonctionnalités d'accessibilité intégrées ?

Les bibliothèques de graphiques accessibles sont généralement conçues par défaut pour répondre aux besoins des personnes en situation de handicap. Elles abordent l'accessibilité en mettant l'accent sur la personnalisation et l'opérabilité du clavier.

Par exemple, Highcharts, Recharts et Google Charts permettent tous une personnalisation et un soutien à l'accessibilité.

Voici une ressource via ce lien qui fournit diverses informations sur des bibliothèques de graphiques accessibles selon leur compatibilité avec différents Frameworks JavaScript, l'accès libre ou propriétaire ou le rendu utilisé.

Comment assurer une bonne navigation des éléments interactifs via le clavier ?

Pour personnaliser la visualisation des données, les graphiques interactifs reposent sur des éléments interactifs tels que :

• des boutons
• des curseurs
• et des points de données qui décrivent des données à un point donné via des infobulles.

Ces éléments interactifs doivent être utilisables et mis en évidence à l'aide du clavier seul. Ils devront suivre les motifs de conception WAI-ARIA.

Il est également essentiel de disposer d'une visualisation bien perceptible à la prise de focus du clavier pour ces éléments interactifs. Les utilisateurs navigant via le clavier seul pourront ainsi savoir où ils se situent et suivre l'ordre de tabulation.
‍
L'ordre de tabulation fait référence à la séquence dans laquelle des éléments sur une page Web, un formulaire ou une interface logicielle sont sélectionnés lors de la navigation à l'aide de la touche correspondante. Il aide les utilisateurs, en particulier ceux qui utilisent des claviers ou des technologies d'assistance. Les utilisateurs peuvent ainsi traverser des éléments interactifs dans un ordre logique et intuitif.
‍

Par exemple, dans l'image ci-dessous, nous voyons les éléments de numérotation. Ils montrent comment le focus devrait se déplacer pour les utilisateurs navigant via le clavier seul.

 
‍

‍

‍

Comment améliorer la compatibilité du lecteur d'écran ?

Toute information qu'un utilisateur voyant peut obtenir doit être transmise par un autre biais aux utilisateurs en situation de handicap visuel. Cette information ne doit pas être résumée ou partielle, mais bien être du même niveau que celle transmise de manière visuelle. Par conséquent, il faut inclure des alternatives textuelles qui décrivent les relations entre différents points de données et toute autre information qu'un utilisateur voyant reçoit. Tous les éléments interactifs ont besoin de noms pour permettre aux utilisateurs de lecteurs d'écran de savoir quels sont les éléments et ce qu'ils font.

Nous vous rappelons que l'utilisation d'éléments natifs en HTML et la bonne utilisation de leur sémantique permet de garantir un certain niveau d'accessibilité. Cependant, si vous utilisez des éléments personnalisés, vous pouvez utiliser ARIA (Accessible Rich Internet Applications) pour :

• fournir des rôles, des propriétés et des états
• décrire la structure de l'organigramme, les éléments interactifs et les données à l'écran.

Attention, l'utilisation de l'API ARIA n'aide qu'à la vocalisation des éléments, et tous les rôles n'aident pas à la vocalisation de certains attributs. Ainsi un attribut "aria-label" ne sera vocalisé que s'il est présent sur un élément interactif comme un bouton ou un élément structurant comme une section de contenu ou un groupe de champs de formulaire.

Vous devez également vous assurer que chaque élément interactif et image comprend les éléments suivants pour permettre aux lecteurs d'écran de comprendre les données présentées :

• titres descriptifs et étiquettes pour tous les éléments de graphique
• résumés ou descriptions de l'objet du graphique et principales idées
• des infobulles et des valeurs de données accessibles qui sont navigables via le clavier et lisibles par les lecteurs d'écran.
  ‍
  ‍

‍

Comment respecter les contrastes des couleurs et transmettre des informations en utilisant une autre caractéristique visuelle en complément de la couleur ?

Le contraste est une opposition marquée entre la luminosité d’une couleur de premier plan et d’une couleur d’arrière-plan.

Les directives du WCAG exigent qu'un rapport 3:1 minimum soit respecté, pour :

• les éléments graphiques ou d'interface,
• les textes sans effet de graisse d’une taille restituée supérieure ou égale à 24 px,
• les textes en gras d’une taille restituée supérieure ou égale à 18,5 px.

Les autres textes doivent respecter un rapport 4.5:1 minimum.
‍

Les utilisateurs daltoniens peuvent ne pas comprendre l'intention des données de votre graphique si les motifs n'utilisent que des couleurs. Par conséquent, vous pouvez utiliser différents motifs pour afficher des données au lieu de compter sur les couleurs comme seule méthode.
‍

Les graphiques interactifs avec des étiquettes de données peuvent également fournir une compréhension claire de ce que chaque barre représente dans un graphique. Si cela n'est pas possible, vous devez au moins fournir une alternative textuelle pour chaque partie du graphique afin que les utilisateurs non ou mal voyants puissent toujours les identifier de façon claire.
‍
‍

‍

‍

Que faire si les graphiques interactifs déjà présents sur votre site ne sont pas accessibles ?

Le travail à faire sur des éléments déjà implémentés peut être compliqué à mettre en œuvre. Pas de panique : le référentiel permet de mettre en place une alternative à ces éléments, alternative qui elle sera accessible.
‍

Il est notable que la présence d'une telle alternative reste utile même si le graphique interactif est accessible. Car elle fournit à tous les utilisateurs le souhaitant un autre moyen d'accès aux données. Cette alternative peut être donnée via un lien ou un bouton adjacent au graphique interactif.

Elle peut se présenter :

• sous la forme de listes bien structurées reprenant, de façon linéaire, les informations du graphique,
• ou sous la forme de tableaux correctement codés figurant les mêmes informations que le graphique.

Conclusion

En adoptant ces meilleures pratiques, vous garantissez que vos graphiques interactifs sont accessibles à tous, y compris aux personnes en situation de handicap. Une telle démarche ne se limite pas à respecter des normes.Elle renforce également la compréhension et l’inclusivité dans la communication des données.

Nous pouvons dès aujourd’hui vous accompagner dans l'évaluation de l’accessibilité de vos graphiques interactifs et faire de l’inclusion une priorité au service de tous vos utilisateurs.

Pour un accompagnement dans la résolution des problématiques d’accessibilité de vos graphiques, contactez Urbilog, votre partenaire engagé pour une accessibilité numérique universelle.

Enfin, je vous invite à lire l'article en anglais sur le blog de Deque ayant servi de base à cet article, ainsi que la vidéo de Pope Tech en anglais sur le sujet.

Une expertise au service de l’accessibilité numérique : article signé par François AUDIC, auditeur en accessibilité numérique