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

The (lack of) accessibility of data visualizations has been one of my special interest topics for years (cf. my collection of resources) – while ever more elaborate and interactive representations of data have become a staple in pretty much any digital publication dealing with data, these often are created by and for people with good to perfect vision, a high ability to think abstractly and conceptualize, and often unconfined motor skills to navigate.

The guide "Centering Accessibility in Data Visualization" (PDF) by Urban Institute, "a nonprofit research organization that provides data and evidence to help advance upward mobility and equity" approaches the topic from general considerations on the role of accessibility in process and artifact, diving all the way into specific examples showcasing how things should be done in an inclusive way.

The table of contents for the 100+ pages:

  • Centering Accessibility in Data Visualization
  • The Right Tools for the Job: Learning and Building for Data Visualization and Accessibility
  • Designing Data for Cognitive Load
  • Writing Alt Text to Communicate the Meaning in Data Visualizations
  • Coding Accessible Data Visualisations
  • Creating Better Screen Reader Experiences
  • Practical Accessibility Testing for Data Visualizations
  • Infographic Equity in PDF Documents: Designing with Accessibility in Mind
  • Building Accessibility Best Practices Into Your Organization’s Data Visualization Style Guidelines
  • Nontechnical Barriers to Data Visualization Accessibility in Government

The list of authors and advisors assembles quite some prominent names from this field, and it's a very approachable document as well – this should probably be a required reading for anyone working with data visualization in any form.

2022

Standpoints

Frank Elavsky on Twitter

In this Twitter thread (unrolled, archived), Frank Elavsky directs attention to a neglected aspect of common data viz accessibility discussions:

Data visualization cares disproportionately far too much about designing for colorblindness relative to other disabilities that are more common (visual impairments included).

While the debate about accessible data visualization hovers a lot around colour palettes (a disability disproportionally affecting white males, as the author highlights), he stresses how other functional disabilities do not get nearly enough attention: low vision, functional/motor impairments, cognitive disabilities, attention deficit/hyperactivity disorders... (see the original thread for an extensive list).

This imbalance, he points out, has an equity component built right into it:

Black, disabled people in the south are ESPECIALLY (disproportionately) excluded from the design of equitable data systems! Include them!

If data is really so important, why is it only accessible for a select few?

Frank Elavsky further elaborates on this topic in a joint talk at the Outlier 2021 conference.

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

2020

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

2021

Specific aspects of dataviz a11y

Colors

Colorblind Users Push Technology Designers to Use Signals Beyond Color

2020

Alt text

Creating descriptive alternative representations of data visualizations is a complex task. While the general considerations for alt texts apply, visualized data comes with additional considerations:

Writing Alt Text for Data Visualization

2021

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

2021

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

2020

D3.js

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

2021

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

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.

This resource by Nick Sousanis, comics artist and educator, as well as professor of Humanities & Liberal Studies at San Francisco State University, is a comprehensive list of resources on accessible comics – specifically for blind and low vision readers.

2022

ComicA11y - An all inclusive online comic experiment.

This is brilliant:

ComicA11y is an experiment that aims to achieve an all-inclusive online comic reading experience. Because comics should be universal.

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

Playing around with the toggles underneath the comic strip reveals a range of enhancements that allow to consume the visual storytelling in different ways. The "comic" context aside, this is a powerful demonstration of how visual content can be made more universally accessible by some (progressive) enhancements.

2020

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

There’s a vibrant community of people talking about accessibility in comics.
2021

Case studies

Resources

Hubs

Chartability is a methodology for ensuring that data visualizations, systems, and interfaces are accessible. Chartability is organized into principles with testable criteria and focused on creating an outcome that is an inclusive data experience for people with disabilities.
2021

Lists

Some websites that collect resources around this topic:

Frameworks and tools with potential for good a11y

More Accessible Mermaid Charts

2022

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

2022

Charts.css

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 with pure CSS. This makes for lighter code, easier implementation and above all should be very accessible as well?

Can't wait to put this to the test…

2022