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
Standpoints
twitter.com
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
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
Writing Alt Text for Data Visualization
medium.com/nightingale/writing-alt-text-for-data-visualization-2a218ef43f81
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
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.
spinweaveandcut.com
ComicA11y - An all inclusive online comic experiment.
comica11y.humaan.com
ArtLung : Adapting Comics for Blind & Low Vision Readers: Seminar Resources
Case studies
Resources
Hubs
Chartability
Lists
Some websites that collect resources around this topic:
- ref://e116fc58, and ref://e11ad6e0 on the background story
Frameworks and tools with potential for good a11y
More Accessible Mermaid Charts
PlantUML – Open-source tool that uses simple textual descriptions to draw beautiful UML diagrams.
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 […]
Last edited: Dec 2022