Accessible SVG Charts with AChart

Keith Andrews and Christopher Alexander Kopel

Sun 13 Oct 2024, Vis 2024 Workshop on Accessible Data Visualization, Florida (Virtual).

Keith Andrews, Chris Kopel, et al.
AChart Creator:
- Command line tool to generate charts with ARIA markup.
- TypeScript, D3, jsdom, xml-formatter, Nexe.
AChart Interpreter:
- Web app to interpret and read out charts with ARIA markup.
- Screen-reader friendly, optional built-in speech output.
- TypeScript, Web Speech API.
- Desktop binaries with Electron.


> acreate --chart bar --dataset fruit.csv \
  --chart-title "Most Popular Fruits" \
  --chart-desc "Each fruit with volume sold."

Table 1: Some of the ARIA roles used by AChart, based on those of Describler. Asterisk (*) indicates role is defined in an official ARIA specification.
Role	Element	Ancestor	Content	Meaning
graphics-document*	svg	-	all charts	graphics root element
chart	g	svg	all objects	chart root element
chartarea	rect	chart	-	chart outline (visual width and height)
xaxis	g	chart	axis title and labels	x-axis
yaxis	g	chart	chart & axis title and labels	y-axis
axislabel	title/text	axis	text	label of axis item
dataset	g	chart	datapoints	data series
datagroup	g	data series	title and data points	collection of related data points
datapoint	g/shape	data series/data group	data point names and values	data point
datavalue	title/text	data point	text	value of data point
...

Table 2: The ARIA properties used by AChart, based on those of Describler. Asterisk (*) indicates property is defined in an official ARIA specification.
Property	Object	Value	Meaning
aria-charttype	chart root	bar/pie/line	type of chart
aria-axistype	axis	category	indicates axis has discrete values
aria-valuemin*	numerical axis	number	minimum value
aria-valuemax*	numerical axis	number	maximum value
aria-lebelledby*	chart/data point	id of title/name	title of chart/name of data point

The command:


> acreate --chart bar --dataset fruit.csv \
  --chart-title "Most Popular Fruits" \
  --chart-desc "Each fruit with volume sold."

creates this SVG:

AChart bar chart of fruit popularity.

Open Image in New Tab and then View Source.