AutoVizuA11y
v2.0.3
AutoVizuA11y est une bibliothèque React qui automatise le processus de création de visualisations de données accessibles pour les utilisateurs de lecteurs d'écran. Il se concentre sur des fonctionnalités qui améliorent l’exploration des graphiques avec un clavier, sans nécessiter de connaissances approfondies en accessibilité de la part des développeurs.
Cet outil se concentre sur trois éléments clés différents qui ont été identifiés après consultation de plusieurs utilisateurs de lecteurs d'écran : la navigabilité des cartes ; des descriptions de graphiques perspicaces ; et des raccourcis qui permettent de naviguer dans les graphiques et d'obtenir des informations plus rapidement.
npm i @feedzai/autovizua11y
Clonez le référentiel dans un répertoire local en utilisant :
git clone https://github.com/feedzai/autovizua11y.git
cd autovizua11y
gpt-3.5-turbo d'OpenAI. La description la plus courte est annoncée par défaut une fois que la visualisation des données est ciblée. Les descriptions peuvent également être rédigées manuellement.| Propriété | Obligatoire/Facultatif | Taper | Description |
|---|---|---|---|
data | Requis | tableau d'objets | Les données présentes dans le graphique. Les valeurs de chaque paire sont ajoutées, dans l'ordre, à une chaîne et lues lorsque l'élément DOM correspondant est focalisé. Remarque : le nombre d'objets doit correspondre au nombre total de points de données représentés dans le DOM. |
selectorType | Requis | objet | Le type HTML (par exemple "rect", "circle" ou "path") des éléments de données ou leur nom de classe — un seul peut être choisi. Cela permet aux éléments de données d'être navigables et d'avoir une étiquette aria. AutoVizuA11y suppose que le nombre d'éléments de données avec la classe ou le type spécifié correspond au nombre d'éléments transmis via la prop data (garantissant qu'aucun élément n'est laissé sans étiquette). |
type | Requis | chaîne | Le type de visualisation des données. Il est annoncé une fois la visualisation de données ciblée, après le titre et avant les descriptions. |
title | Requis | chaîne | Le titre de la visualisation, qui doit être court et concis, mettant en valeur l'objectif du contenu à l'intérieur de la visualisation de données. Il est annoncé une fois qu'une visualisation de données est ciblée, avant le type et les descriptions plus ou moins longues. |
insights | Requis | chaîne | Attend une string qui correspond à la clé de l'objet de données à partir de laquelle les valeurs seront utilisées pour dériver des informations statistiques. Par exemple, si les informations doivent être dérivées du amount contenu dans les données, c'est ce qui doit être transmis dans cette propriété. Si une chaîne vide "" est transmise, l'utilisateur recevra une alerte indiquant "Ce raccourci ne fonctionne pas dans ce graphique". Cela s'applique aux raccourcis liés aux valeurs minimales, moyennes et maximales, ainsi qu'à ceux impliquant des comparaisons avec ces informations et d'autres points de données. Remarque : les valeurs utilisées pour les informations doivent être de type Number . |
context | Requis | chaîne | Le contexte dans lequel la visualisation des données est présente. Il est transmis dans l'invite, lors de la génération automatique des descriptions, ce qui donne lieu à des sorties contextualisées. |
descriptor | Facultatif | chaîne | En recevant une string , ce descripteur permet de mieux contextualiser ce que sont les éléments de données. Il est ajouté à la fin de chaque élément de données. Si aucun descripteur n’est fourni, un texte vide (« ») est défini à la place. |
multiSeries | Facultatif | chaîne | Lorsque vous travaillez avec des données multi-séries, fournissez une string qui correspond à la clé de l'objet de données qui définit chaque série, permettant aux utilisateurs de naviguer entre différentes séries/clusters en plus de la navigation normale. Si une chaîne vide "" est passée, l'outil interprète les données comme une série unique. |
shortcutGuide | Facultatif | JSX.Élément | AutoVizuA11y a son NativeShortcutGuide par défaut mais vous pouvez créer le vôtre. Le ShortcutGuide est enveloppé dans un <dialog> et sa référence peut être obtenue via la propriété dialogRef , que vous pouvez ajouter à votre shortcutGuide . Le dialogRef est un RefObject<HTMLDialogElement> , que vous pouvez utiliser pour créer, par exemple, un bouton qui gère la logique de fermeture de cette boîte de dialogue. |
autoDescriptions | Obligatoire (option A) | objet | Diverses options concernant la création de descriptions automatiques avec des modèles OpenAI. AutoVizuA11y effectue deux appels API par visualisation encapsulée, un pour chaque type de description (plus long et plus court). Les options de cet accessoire peuvent être vérifiées ici. Cet accessoire ne peut pas être utilisé en même temps que "manualDescriptions". |
manualDescriptions | Obligatoire (option B) | objet | Deux descriptions écrites manuellement des données. En fournissant cet accessoire, aucune description automatique n'est générée, donc aucun coût n'est associé. Les options de cet accessoire peuvent être vérifiées ici. Cet accessoire ne peut pas être utilisé en même temps que les "autoDescriptions". |
autoDescriptions| Clés | Obligatoire/Facultatif | Taper | Description |
|---|---|---|---|
dynamicDescriptions | Facultatif | booléen | Définir ceci sur false empêche le composant de générer les deux descriptions pour ce graphique après le premier rendu (les descriptions sont enregistrées dans le stockage local). Cela devrait être utile pour les visualisations statiques. |
apiKey | Requis | chaîne | La clé API OpenAI, permettant à un LLM de générer des descriptions de type humain de la visualisation des données. Vous pouvez vous procurer le vôtre ici, Il est recommandé au développeur de prendre les précautions nécessaires afin de masquer la clé API. |
model | Facultatif | chaîne | L'OpenAI LLM chargé de générer les deux descriptions. Vous pouvez consulter les modèles disponibles ici. Si aucun modèle n'est fourni, gpt-3.5-turbo sera choisi par default . |
temperature | Facultatif | nombre | Une température, de 0 à 1 , utilisée dans le modèle responsable de générer les deux descriptions. Les descriptions avec des températures plus proches de 0 devraient être plus déterministes entre les appels d'API tandis que celles étant plus proches de 1 devraient être plus aléatoires entre les appels d'API. Vous pouvez consulter les modèles disponibles ici. Si aucun modèle n'est fourni, 0 sera choisi par default . |
manualDescriptions| Clés | Obligatoire/Facultatif | Taper | Description |
|---|---|---|---|
longer | Requis | chaîne | Description plus longue associée à la visualisation de données encapsulée. |
shorter | Requis | chaîne | Description plus courte associée à la visualisation de données encapsulée. |
import { AutoVizuA11y } from "@feedzai/autovizua11y" ;
// ...
const barData = [
{ day : "Monday" , value : 8 } ,
{ day : "Tuesday" , value : 6.5 } ,
{ day : "Wednesday" , value : 7 } ,
{ day : "Thursday" , value : 9 } ,
{ day : "Friday" , value : 11 } ,
{ day : "Saturday" , value : 2 } ,
{ day : "Sunday" , value : 3 } ,
] ;
const multiLineData = [
{ series : "Croatia" , x : 2010 , y : 4.37 } ,
{ series : "Croatia" , x : 2015 , y : 4.25 } ,
{ series : "Croatia" , x : 2020 , y : 4.13 } ,
{ series : "Croatia" , x : 2022 , y : 4.03 } ,
{ series : "Latvia" , x : 2010 , y : 4.25 } ,
{ series : "Latvia" , x : 2015 , y : 4.25 } ,
{ series : "Latvia" , x : 2020 , y : 4.25 } ,
{ series : "Latvia" , x : 2022 , y : 4.25 } ,
{ series : "Lithuania" , x : 2010 , y : 4.25 } ,
{ series : "Lithuania" , x : 2015 , y : 4.25 } ,
{ series : "Lithuania" , x : 2020 , y : 4.25 } ,
{ series : "Lithuania" , x : 2022 , y : 4.25 } ,
] ;
const longerDesc = "..." ;
const shorterDesc = "..." ;
// ...
function App ( ) {
return (
< >
{ /* SingleSeries with automatic descriptions */ }
< AutoVizuA11y
data = { barData }
selectorType = { { element : "rect" } }
type = "bar chart"
title = "Number of hours spent looking at a screen per day of the week."
context = "Screen time dashboard"
insights = "value"
descriptor = "hours"
autoDescriptions = { {
dynamicDescriptions : false ,
apiKey : API_KEY ,
model : "gpt-3.5-turbo" ,
temperature : 0.1 ,
} }
>
< BarChart > < / BarChart >
< / AutoVizuA11y >
{ /* MultiSeries with manual descriptions */ }
< AutoVizuA11y
data = { multiLineData }
selectorType = { { element : "circle" } }
type = "Multi line chart"
title = "Latvia, Lithuania, and Croatia are among the countries where population is decreasing"
context = "Interface with World data"
insights = "y"
descriptor = "millions"
multiSeries = "series"
manualDescriptions = { {
longer : longerDesc ,
shorter : shorterDesc ,
} }
>
< LineChart > < / LineChart >
< / AutoVizuA11y >
< / >
) ;
} Tous les raccourcis suivants ne fonctionnent qu'une fois concentrés sur une visualisation de données (ou des éléments de données adjacents) couverte par AutoVizuA11y.
Outre la navigation entre les visualisations de données, tous les autres résultats de raccourci (à savoir les informations statistiques) ne concernent que chaque visualisation individuelle.
L'outil a été testé avec VoiceOver, JAWS et NVDA, ainsi qu'avec les navigateurs les plus couramment utilisés. Les combinaisons de touches pour chaque raccourci ont été choisies dans le but d'éviter les collisions avec d'autres des lecteurs d'écran et navigateurs testés. Cela dit, il est suggéré aux utilisateurs de JAWS et NVDA d'activer le "Mode Focus" ( Insertion + Espace ) afin que la navigation avec les touches fléchées puisse se faire entre et à l'intérieur des visualisations .
Vous pouvez consulter une série d'exemples construits à l'aide d'AutoVizuA11y ici (certaines fonctionnalités nécessitent une clé API OpenAI).
Tous les tests ont été écrits en utilisant Cypress.
Pour exécuter des tests localement :
# root
npm install
npm run build
# /examples
npm install
npm run dev
# root
npx cypress open
Le Guide des raccourcis est accessible par l'utilisateur à l'aide du ? touche, tout en ayant le focus clavier soit sur un graphique AutoVizuA11y, soit sur un élément de données sous-jacent. En tant que développeur, vous pouvez remplacer ce composant par le vôtre ou modifier son style.
| Clé(s) d'activation | Description |
|---|---|
| ? | Entrer le guide des raccourcis |
| ? ou Échap | Quitter le guide des raccourcis |
| ↓ | Entrez dans un graphique |
| ↑ | Sortir d'un graphique |
| → | Avancer dans un élément de page |
| ← | Revenir en arrière dans un élément de page |
| Alt (option) + M | Se déplacer entre les séries de données à l'intérieur du graphique |
| Accueil ou Alt (option) + Q | Aller au début d'un graphique |
| Fin ou Alt (option) + W | Aller à la fin d'un graphique |
| Alt (option) + X | Définir le nombre de points de données à sauter à la fois |
| + | Ajoutez un numéro aux points de données à sauter à la fois |
| - | Soustrayez un nombre aux points de données à sauter à la fois |
| Alt (option) + J | Valeur minimale |
| Alt (option) + K | Valeur moyenne |
| Alt (option) + L | Valeur maximale |
| Alt (option) + Maj + J | Comparez le point actuel à la valeur minimale de la visualisation |
| Alt (option) + Maj + K | Comparez le point actuel à la valeur moyenne de la visualisation |
| Alt (option) + Maj + L | Comparez le point actuel à la valeur maximale de la visualisation |
| Alt (option) + Z | Comment un point se compare au reste du graphique |
| Alt (option) + B | Définir une description plus longue du graphique |
| Alt (option) + S | Définir une description plus courte du graphique (par défaut) |
Le Guide des raccourcis est le seul aspect d'AutoVizuA11y qui est également visuel. Vous pouvez modifier le style du guide par défaut. Vous trouverez ci-dessous les noms de classe des éléments qui composent ce composant :
| Nom de classe | HTML |
|---|---|
| guide des raccourcis | formulaire |
| guide-raccourci__conteneur | div |
| raccourci-guide__header | div |
| guide-raccourci__titre | h2 |
| guide-raccourci__étiquette-bouton | p |
| raccourci-guide__bouton | bouton |
| guide-raccourci__break | heure |
| guide-raccourci__body | div |
| guide-raccourci__section | div |
| raccourci-guide__list--title | h3 |
| raccourci-guide__list | div |
| raccourci-guide__ligne | dl |
| raccourci-guide__cell--raccourci | dt |
| raccourci-guide__cell--explication | jj |
Vous trouverez ci-dessous l'entrée BibTeX pour l'article complet d'EuroVis'24 qui explique le processus de création d'AutoVizuA11y.
@article { 2024-AutoVizuA11y ,
title = { AutoVizuA11y: A Tool to Automate Screen Reader Accessibility in Charts } ,
ISSN = { 1467-8659 } ,
url = { http://dx.doi.org/10.1111/cgf.15099 } ,
DOI = { 10.1111/cgf.15099 } ,
journal = { Computer Graphics Forum } ,
publisher = { Wiley } ,
author = { Duarte, Diogo and Costa, Rita and Bizarro, Pedro and Duarte, Carlos } ,
year = { 2024 } ,
month = jun
}D'autres options de licence peuvent être disponibles, veuillez contacter [email protected] pour plus d'informations.
