@feedzai/autovizua11y v1.0.3

AutoVizuA11y

Description

AutoVizuA11y is a React library that automates the process of creating accessible data visualizations. It focuses on features that improve the exploration of charts with screen readers, without requiring extensive accessibility knowledge from developers.

This tool focuses on three different key components that were identified after consulting with several screen reader users: chart navigability; shortcuts that allow one to navigate the charts and get insights more quickly; and insightful chart descriptions.

Install AutoVizuA11y

Via npm

npm i @feedzai/autovizua11y

Via Github

Clone the repository into a local directory using:

git clone https://github.com/feedzai/autovizua11y.git
cd autovizua11y

AutoVizuA11y for Developers

Inputs

• A set of props, passed in the AutoVizuA11y component, with information regarding the data visualization wrapped.
• The chart that will receive AutoVizuA11y's accessibility features.

Outputs

• Navigation
  • Between data visualizations wrapped by AutoVizuA11y present on the same page;
  • Between those same data visualizations and underlying data elements;
  • Between the underlying data elements.
• Descriptions
  • Labels for every data element;
  • Two descriptions for every data visualization wrapped by AutoVizuA11y. Both are composed of a title, information on the visualization type, and a human-like description generated using the gpt-3.5-turbo model from OpenAI. They can be made longer or shorter, depending on the user's requirements. The shorter description is announced by default once the data visualization gets focused. The descriptions can also be inputted manually.
• Shortcuts
  • That improves navigation by increasing speed and efficiency in the exploration of a chart;
  • That provides statistical insights about the data.

AutoVizuA11y properties

autoDescriptions prop options

manualDescriptions prop options

Sample Implementation

import { AutoVizuA11y } from "@feedzai/autovizua11y";

// ...

const barData = [
	{
		day: "Monday",
		hours: 8,
	},
	{
		day: "Tuesday",
		hours: 6.5,
	},
	{
		day: "Wednesday",
		hours: 7,
	},
	{
		day: "Thursday",
		hours: 9,
	},
	{
		day: "Friday",
		hours: 11,
	},
	{
		day: "Saturday",
		hours: 2,
	},
	{
		day: "Sunday",
		hours: 3,
	},
];

const multiLineData = [
	{
		x: 2010,
		y: 4.37,
		series: "Croatia",
	},
	{
		x: 2015,
		y: 4.25,
		series: "Croatia",
	},
	{
		x: 2020,
		y: 4.1,
		series: "Croatia",
	},
	{
		x: 2022,
		y: 4.03,
		series: "Croatia",
	},
	{
		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: "Latvia",
	},
	{
		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,
		series: "Lithuania",
	},
];

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="hours"
				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={"Countries in Europe are seeing some of the sharpest population decreases. "}
				insights="y"
				descriptor="millions"
				multiSeries="series"
				manualDescriptions={{
					longer: longerDesc,
					shorter: shorterDesc,
				}}
			>
				<LineChart></LineChart>
			</AutoVizuA11y>
		</>
	);
}

AutoVizuA11y for screen reader users

All the following shortcuts only work once focused on a data visualization (or adjacent data elements) covered by AutoVizuA11y.

Besides the navigation between data visualizations, every other shortcut outcome (namely the statistical insights) only regards each individual visualization.

The tool was tested with VoiceOver, JAWS and NVDA, as well as the most commonly used browsers. The key combinations for each shortcut were chosen with the intention to avoid collisions with others from the tested screen readers and browsers. That said, it is suggested for users of JAWS and NVDA turn on "Focus mode" (Insert + Space) so that the navigation with arrow keys can be done between and inside the visualizations.

Examples

You can check a series of examples built using AutoVizuA11y here (it requires an OpenAI API key).

Shortcut Guide

Other licensing options may be available, please reach out to data-viz@feedzai.com for more information.