AutoVizuA11y
v2.0.3
AutoVizuA11y es una biblioteca de React que automatiza el proceso de creación de visualizaciones de datos accesibles para los usuarios de lectores de pantalla. Se centra en funciones que mejoran la exploración de gráficos con un teclado, sin requerir amplios conocimientos de accesibilidad por parte de los desarrolladores.
Esta herramienta se centra en tres componentes clave diferentes que se identificaron después de consultar con varios usuarios de lectores de pantalla: navegabilidad de las cartas; descripciones de gráficos interesantes; y atajos que permiten navegar por los gráficos y obtener información más rápidamente.
npm i @feedzai/autovizua11y
Clona el repositorio en un directorio local usando:
git clone https://github.com/feedzai/autovizua11y.git
cd autovizua11y
gpt-3.5-turbo de OpenAI. La descripción más corta se anuncia de forma predeterminada una vez que se enfoca la visualización de datos. Las descripciones también se pueden escribir manualmente.| Propiedad | Requerido/Opcional | Tipo | Descripción |
|---|---|---|---|
data | Requerido | conjunto de objetos | Los datos presentes en el gráfico. Los valores de cada par se agregan, en orden, a una cadena y se leen cuando se enfoca el elemento DOM correspondiente. Nota: la cantidad de objetos debe coincidir con el total de puntos de datos representados en el DOM. |
selectorType | Requerido | objeto | El tipo HTML (por ejemplo, "rect", "círculo" o "ruta") de los elementos de datos o su nombre de clase; solo se puede elegir uno. Esto permite que los elementos de datos sean navegables y tengan una etiqueta aria. AutoVizuA11y supone que la cantidad de elementos de datos con la clase o tipo especificado coincide con la cantidad de elementos pasados a través de la propiedad de datos (asegurando que ningún elemento quede sin una etiqueta). |
type | Requerido | cadena | El tipo de visualización de datos. Se anuncia una vez que se enfoca una visualización de datos, después del título y antes de las descripciones. |
title | Requerido | cadena | El título de la visualización, que debe ser breve y conciso, mostrando el propósito del contenido dentro de la visualización de datos. Se anuncia una vez que se enfoca una visualización de datos, antes del tipo y las descripciones más largas o más cortas. |
insights | Requerido | cadena | Espera una string que corresponde a la clave del objeto de datos a partir del cual se utilizarán los valores para derivar información estadística. Por ejemplo, si la información debe derivarse de la amount de datos, eso es lo que se debe pasar en esta propiedad. Si se pasa una cadena vacía "" , el usuario recibirá una alerta que indicará "Este acceso directo no funciona en este gráfico". Esto se aplica a los atajos relacionados con valores mínimos, promedio y máximos, así como a aquellos que involucran comparaciones con estos conocimientos y otros puntos de datos. Nota: los valores utilizados para las estadísticas deben ser del tipo Number . |
context | Requerido | cadena | El contexto en el que está presente la visualización de datos. Se pasa en el mensaje, al generar descripciones automáticas, lo que da como resultado resultados contextualizados. |
descriptor | Opcional | cadena | Al recibir una string , este descriptor ayuda a contextualizar mejor qué son los elementos de datos. Se agrega al final de cada elemento de datos. Si no se proporciona ningún descriptor, se establece en su lugar un texto en blanco (“”). |
multiSeries | Opcional | cadena | Cuando trabaje con datos de varias series, proporcione una string que corresponda a la clave en el objeto de datos que define cada serie, lo que permitirá a los usuarios navegar entre diferentes series/grupos además de la navegación normal. Si se pasa una cadena vacía "" , la herramienta interpreta los datos como una serie única. |
shortcutGuide | Opcional | Elemento JSX | AutoVizuA11y tiene su NativeShortcutGuide predeterminada, pero usted puede crear la suya propia. ShortcutGuide está incluido en un <dialog> y su referencia se puede obtener a través de la propiedad dialogRef , que puede agregar a su shortcutGuide . dialogRef es un RefObject<HTMLDialogElement> , que puede usar para crear, por ejemplo, un botón que maneje la lógica de cerrar este cuadro de diálogo. |
autoDescriptions | Requerido (opción A) | objeto | Varias opciones en cuanto a la creación de descripciones automáticas con modelos OpenAI. AutoVizuA11y realiza dos llamadas API por visualización envuelta, una para cada tipo de descripción (más larga y más corta). Las opciones para este accesorio se pueden consultar aquí. Este accesorio no se puede utilizar al mismo tiempo que "manualDescriptions". |
manualDescriptions | Requerido (opción B) | objeto | Dos descripciones escritas manualmente de los datos. Al proporcionar este accesorio no se generan descripciones automáticas, por lo que no tiene ningún coste asociado. Las opciones para este accesorio se pueden consultar aquí. Este accesorio no se puede utilizar al mismo tiempo que "autoDescriptions". |
autoDescriptions| Llaves | Requerido/Opcional | Tipo | Descripción |
|---|---|---|---|
dynamicDescriptions | Opcional | booleano | Establecer esto en false evita que el componente genere las dos descripciones para ese gráfico después del primer renderizado (las descripciones se guardan en el almacenamiento local). Esto debería ser útil para visualizaciones estáticas. |
apiKey | Requerido | cadena | La clave API de OpenAI, que permite a un LLM generar descripciones similares a las humanas de la visualización de datos. Puede obtener el suyo aquí. Se recomienda que el desarrollador tome las precauciones necesarias para ocultar la clave API. |
model | Opcional | cadena | El OpenAI LLM responsable de generar ambas descripciones. Puedes consultar los modelos disponibles aquí. Si no se proporciona ningún modelo, se elegirá gpt-3.5-turbo de forma default . |
temperature | Opcional | número | Una temperatura, de 0 a 1 , utilizada en el modelo responsable de generar ambas descripciones. Las descripciones con temperaturas más cercanas a 0 deberían ser más deterministas entre llamadas a la API, mientras que aquellas que están más cerca de 1 deberían ser más aleatorias entre las llamadas a la API. Puedes consultar los modelos disponibles aquí. Si no se proporciona ningún modelo, se elegirá 0 de default . |
manualDescriptions opciones de accesorios| Llaves | Requerido/Opcional | Tipo | Descripción |
|---|---|---|---|
longer | Requerido | cadena | La descripción más larga asociada con la visualización de datos empaquetados. |
shorter | Requerido | cadena | La descripción más corta asociada con la visualización de datos empaquetados. |
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 >
< / >
) ;
} Todos los siguientes atajos solo funcionan una vez enfocados en una visualización de datos (o elementos de datos adyacentes) cubiertos por AutoVizuA11y.
Además de la navegación entre visualizaciones de datos, todos los demás resultados de acceso directo (es decir, los conocimientos estadísticos) solo tienen en cuenta cada visualización individual.
La herramienta fue probada con VoiceOver, JAWS y NVDA, así como con los navegadores más utilizados. Las combinaciones de teclas para cada atajo se eligieron con la intención de evitar colisiones con otras de los lectores de pantalla y navegadores probados. Dicho esto, se sugiere a los usuarios de JAWS y NVDA que activen el "Modo de enfoque" ( Insertar + Espacio ) para que la navegación con las teclas de flecha se pueda realizar entre y dentro de las visualizaciones .
Puede consultar una serie de ejemplos creados con AutoVizuA11y aquí (algunas funciones requieren una clave API de OpenAI).
Todas las pruebas se han escrito utilizando ciprés.
Para ejecutar pruebas localmente:
# root
npm install
npm run build
# /examples
npm install
npm run dev
# root
npx cypress open
El usuario puede acceder a la Guía de acceso directo mediante el botón ? tecla, mientras el teclado se centra en un gráfico AutoVizuA11y o en un elemento de datos subyacente. Como desarrollador, puedes anular este componente con el tuyo propio o cambiar su estilo.
| Claves de activación | Descripción |
|---|---|
| ? | Ingresar a la guía de acceso directo |
| ? o ESC | Dejar guía de atajos |
| ↓ | Entrar en un gráfico |
| ↑ | Salir de un gráfico |
| → | Avanzar en un elemento de página |
| ← | Retroceder en un elemento de página |
| Alt (opción) + M | Moverse entre series de datos dentro del gráfico |
| Inicio o Alt (opción) + Q | Saltar al principio de un gráfico |
| Fin o Alt (opción) + W | Saltar al final de un gráfico |
| Alt (opción) + X | Definir el número de puntos de datos que se saltarán a la vez |
| + | Agregue un número a los puntos de datos que se saltarán a la vez |
| - | Reste un número a los puntos de datos que se saltarán a la vez |
| Alt (opción) + J | Valor mínimo |
| Alt (opción) + K | Valor medio |
| Alt (opción) + L | Valor máximo |
| Alt (opción) + Mayús + J | Compare el punto actual con el valor mínimo de la visualización. |
| Alt (opción) + Mayús + K | Compare el punto actual con el valor promedio de la visualización |
| Alt (opción) + Mayús + L | Compare el punto actual con el valor máximo de la visualización. |
| Alt (opción) + Z | Cómo se compara un punto con el resto del gráfico |
| Alt (opción) + B | Establecer una descripción más larga del gráfico |
| Alt (opción) + S | Establecer una descripción más corta del gráfico (predeterminado) |
La Guía de acceso directo es el único aspecto de AutoVizuA11y que también es visual. Puede cambiar el estilo de la guía predeterminada. A continuación se muestran los nombres de clase de los elementos que componen este componente:
| nombre de clase | HTML |
|---|---|
| guía de atajos | forma |
| guía-atajos__contenedor | div |
| guía-atajo__encabezado | div |
| guía-atajo__título | h2 |
| guía-atajos__etiqueta-botón | pag |
| guía-atajo__botón | botón |
| guía-atajo__break | hora |
| guía-atajo__cuerpo | div |
| sección-guía-de-atajos__ | div |
| lista-guía-de-atajos--título | h3 |
| guía-atajos_lista | div |
| guía-atajo__fila | dl |
| guía-atajo__celda--atajo | dt |
| guía-atajo__celda--explicación | dd |
A continuación se muestra la entrada BibTeX para el documento completo de EuroVis'24 que explica el proceso de creación de 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
}Es posible que haya otras opciones de licencia disponibles; comuníquese con [email protected] para obtener más información.
