Example of chart accessibility for blind user

This page shows the approach one charting widget uses to make charts accessible to blind users. The chart is rendered in the widget. If the widget is told the user is blind, the chart is converted into an aria-label for the widget and a (visually hidden) shadow DOM is injected as a child of widget. Assistive technology can use the shadow DOM to navigate through the chart. Everything is done automatically by the widget.

This implementation does not provide any visual information. Would it be nice to have visual information in the legend and no where else? Should each item include visual information? This is generated automatically, how would you tell the user, the points in the scatterplot are shaped like jets? Does it matter? The polar transform suggests the cyclical nature of a year, and that January is close to December. However, in this case, the two years of data are 10 years apart (1998 and 2008) and no January is near a December in the data. Is the polar transform just eye candy in this case? Is the shape of the data points (a jet) eye candy?

The aria-label and shadow DOM are for the chart below. There is no widget on this page, only the artifacts from the widget (svg, aria-label, shadow DOM).

Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec 1998 2008

Widget aria-label

aria-label

scatter plot Month has 12 categories max 3 values (Month, Cancelled, Year) (Feb, 20596, 2008), (Dec, 17779, 2008), (Jan, 17308, 2008) min 3 values (Month, Cancelled, Year) (Dec, 17779, 2008), (Nov, 4458, 2008), (Oct, 3249, 2008) Cancelled y axis range 3249, 20596 Month x axis range 0, 11

Notes

A description has a high value for users. The widget tries to keep the aria-label from being too long. I believe you can abort the reading of an aria-label but I don't believe you can read it line by line like you can for regular text.

The description includes the definition of the variable tuple (Month, Cancelled, Year) before reporting the mins and maxs. Not repeating the variable names for each min/max tuple helps keep the aria-label shorter.

In this case, the variable tuple would read better if the year followed the month so it would read (Feb, 2008, 20596). However the order of variables reported represent the x and y dimensions followed by the variable for the aesthetics (color). The widget is consistent in the order it reports variable tuples, so users can learn to rely on the order of the variables in a tuple. This is true in the data elements too.

Shadow DOM for screen reader

Shadow DOM

Notes

The order of the features in the chart's shadow DOM follow the recommendations from the National Center for Accessible Media (title, axis, legend, data elements, reference elements).