Design for all » Inclusive usability » Visualizations

Commonly based on advanced visual representations, the accessibility of (interactive) information and data visualizations is often very limited. A growing community aims to tackle these limitations by developing and showcasing best practices.

The probably most comprehensive “starter pack” on this topic – I consider this a must-read for anyone working with data visualization:

Do No Harm Guide: Centering Accessibility in Data Visualization

urban.org

With great interest, I discovered the comprehensive guide "Centering Accessibility in Data Visualization" by Urban Institute: it approaches the topic from general considerations on the role of #a11y in process and artifact, diving all the way into specific examples showcasing how things should be done in an inclusive way.
2022

Standpoints

Frank Elavsky on Twitter

twitter.com

In this Twitter thread, Frank Elavsky directs attention to a neglected aspect of common data viz accessibility discussions.
2021

Intros

Some other sources that provide a good starting point to dive into the topic:

An intro to designing accessible data visualizations - Sarah L. Fossheim

fossheim.io/writing/posts/accessible-dataviz-design/

Frank Elavsky, Larene Le Gassick, Sarah Fossheim—Outlier 2021—Are your visualizations excluding ppl? - YouTube

youtube.com/watch?v=SWB-KLXN-Ok&list=PLAm5TIX-yz7IkKOUcStM_vl8AD0S9v0co&index=11

Specific aspects of dataviz a11y

Colors

Colorblind Users Push Technology Designers to Use Signals Beyond Color

wsj.com/articles/colorblind-users-push-technology-designers-to-use-signals-beyond-color-11591351201

Alt text

It gets even more complicated with interactive presentations, as the interactive features have to be represented in the alternative content as well:

How to write accessible descriptions for interactive charts

highcharts.com/blog/tutorials/accessible-descriptions-for-interactive-charts/#

SVG

Vector graphics, with SVG itself being semantic, provide ample opportunities for designing accessible data visualizations. But mastering this skill is far from easy:

Case Study: Implementing Accessible Data Charts for the Khan Academy 2018 Annual Report

sarasoueidan.com/blog/accessible-data-charts-for-khan-academy-2018-annual-report/

D3.js

How to create a screen reader accessible graph like Apple's with D3.js by Sarah L. Fossheim

fossheim.io/writing/posts/apple-dataviz-a11y-tutorial/

Comics

There is an active community working on questions of how to make comics more accessible. Their work can also inform other fields of making visual content accessible.

Blind Accessible Comics

spinweaveandcut.com

My interest in the accessibility of information visualisations occasionally leads me into the rather niche topic of accessible comics. **Comics and graphic novels share a lot of the accessibility challenges information visualisations have** (content that is by definition first and foremost visual), hence the approaches to solving the challenge could cross-pollinate.
2022

ComicA11y - An all inclusive online comic experiment.

comica11y.humaan.com

The demo at comica11y.humaan.com by Paul Spencer is a showcase of various techniques to make a digital comic accessible for all.
2020

ArtLung : Adapting Comics for Blind & Low Vision Readers: Seminar Resources

artlung.com/blog/2021/12/06/seminar-comics-a11y/

Case studies

Resources

Hubs

Lists

Some websites that collect resources around this topic:

Frameworks and tools with potential for good a11y

More Accessible Mermaid Charts

github.com/mermaid-js/mermaid/issues/2732

PlantUML – Open-source tool that uses simple textual descriptions to draw beautiful UML diagrams.

plantuml.com/

Charts.css

chartscss.org

Charts.css is a modern CSS framework. It uses CSS utility classes to style HTML elements as charts.
A brilliant idea: Charts.css turns semantically marked-up data tables into visualizations using various types of graphs, and all […]
2022

Last edited: Dec 2022