Thread by @FrankElavsky

"What are examples of accessible, effective chart descriptions?"

I get asked this question a LOT, so I am going to make a thread here to easily link to later.

(This thread covers both simple and complex use-cases for human-authored descriptions.)

Feel free to share/bookmark!

First, I use "descriptions" because "alt text:"
- is a specific technology
- limits the potential to layer/chunk complex information
- is non-visual (only available via screen reader).

Tables, titles, and data-interfaces don't always use "alt" and are good for everyone!

The first set of examples is Benetech's DIAGRAM Center guidelines. These guidelines are research backed, super comprehensive, and easy to apply!

There are nearly 20 examples of different kinds of charts/diagrams.

diagramcenter.org/table-of-conte…

Naturally worth noting next is the National Center for Accessible Media's (NCAM) "Effective Practices for Description of Science Content within Digital Talking Books."

This research predates (and is included in) DIAGRAM's work.

Guidelines + 10 examples:
wgbh.org/foundation/nca…

You might notice that NCAM/DIAGRAM include entire tables of data in their "Descriptions" and not just a couple sentences!

This is engaging a super important issue: that alt text (or short descriptions) are often not enough, even for simple charts!

Next is authoring advice *specific* to alt text/short descriptions by Amy Cesal (@AmyCesal).

This is my #1 recommendation for beginners. It really helps to stay concise and clear when writing.

(But remember to include a table too!)

medium.com/nightingale/wr…

Next:
Use a "takeaway" title instead of a "descriptive" title. Not only is this research backed (thanks @michelle_borkin et al), but it is super easy to do relative to the impact it can have on the chart comprehension of many audiences.

Research here:
ieeexplore.ieee.org/document/71926…

Examples of good titles from many sources are unfortunately currently inaccessible (little/no alt text available). @AnnKEmery, @storywithdata, & @evergreendata may have some articles on this topic with images that have good descriptions provided.

For now: stephanieevergreen.com/strong-titles/

Now we are getting into the really cutting-edge stuff beyond alt, simple descriptions, and tables.

What about different *kinds* and *layers* of information in a single chart/diagram?

Is a table always an effective low-level way to access the data?

While there hasn't been research that really formalizes "types of data structures that visualizations produce" (as opposed to data structures/tables they receive as input), there is already work that tries to explore this problem.

Think semantics, layers, and chunks!

First is @zorkow's Progressive Access, which I consider to be the first functional exploration of this larger problem (that tables are not always enough for low level representation).

Descriptions are available *as the user navigates* the data structure!
progressiveaccess.com/chemistry/

Not only did Sorge et al explore how to represent complex math/science charts and diagrams in "chunks" and "layers" but they also made these visualizations keyboard AND screen reader accessible! Killer technology!

Many examples here:
progressiveaccess.com/chemistry/reso…

The wonderful @alundgard and @arvindsatya1 have some spicy, super-fresh empirical research on semantic layers of information in charts.

Their paper is online and accessible too! They also have plenty of examples and findings worth digging into:

vis.csail.mit.edu/pubs/vis-text-…

Does navigation *and* multiple levels of description sound really intimidating to build?

Well, the final examples are modern JavaScript libraries that allow developers to do both simple & complex chart descriptions + navigation within the authoring of the visualization itself.

First is the amazing @Highcharts. I can't speak more highly of the work of @oysteinmoseng and team.

I use their line chart as the BEST example in this whole series.

Their API is unmatched and goes well beyond just description capabilities.
highcharts.com/demo/accessibl…

But Highcharts isn't 100% open/free! So the final example is definitely a plug for my previous work @Visa on their data experience team.

We have a design system component library of charts that work with Vanilla, Angular, React, R (via CRAN) and more!
developer.visa.com/pages/chart-co…

Our charts allow the developer to specify what the different kinds of information are that you might want to convey.

And then when it comes to layering, that is based on the type of chart/data being visualized and happens automatically!

Neat!
github.com/visa/visa-char…

You can't dig into the element-level markup in our examples (because we programmatically generate HTML above the SVG in order to use semantic HTML elements like <button>).

But feel free to spin up your favorite screen reader and give some charts a try:
observablehq.com/@frankelavsky/…

One serious gap worth noting (that I alluded to at the start of this thread): machine-authored (non-human) descriptions are terrible (especially for complex, multi-level diagrams/charts).

This makes interactive, exploratory, and live-updating visualizations an unsolved problem!

And that is the thread! Did I forget anything you think is worth noting?

Please comment here or even open an issue/PR on our github, where we keep track of all the latest and greatest resources/examples on data visualization and accessibility:
github.com/dataviza11y/re…