Accessibility

More than just Alt-text

Data Vis:

Minimum Human Specs

Perception requires

Visual acuity

Color Vision

Feature Integration
(& focused attention!)

Grouping & Sense-making

Perception requires

Far-sightedness
VisionBlind/Low Vision
Macular degeneration

Protanopia
Color Vision Deuteranopia
Tritanopia

ADHD Feature Integration
(& focused attention!)
Sensory Processing Disorder

 
Grouping & Sense-making
Schizophrenia

When you step back and think about everything that can go wrong with the process of perceiving, understanding, and interacting with a data visualization, it’s a bit of a miracle that these things are useful!

For each of these steps, I’ve listed conditions that may impact the underlying cognitive processes - this is not a clinical definition, because every person and their symptoms are different, but a way to make you aware of the challenges your audience may face.

Some of these issues are obviously harder to work around than others: if you are entirely blind, for instance, the information presented visually isn’t going to have a chance to make it to working memory; if you’re color vision impaired, you may have to expend more effort to figure out what a chart is saying, and you may get things wrong.

If you have problems with grouping and sense-making, you may be able to get some information off of the axes and the chart title, but not be able to make full use of the data represented.

Understanding Requires

Reading comprehension. Most charts have some text: title, axis labels, legends, and annotations. Any perceptual issues that affect reading affect data communication.

Working Memory

Spatial reasoning

Numeracy

Information from LTM

Understanding Requires

Reading comprehension.
Language Learner Low Literacy Dyslexia

Long COVID
Working Memory ADHD
Dementia Multitasking

Dyslexia
ADHD Spatial reasoning

Dementia
Information from LTM
New parent

Math Phobia
Numeracy
Dyscalculia

The biggest point I want to emphasize here is that challenges related to graphical perception are not necessarily traditional semi-permanent or permanent disabilities - a new parent might have transient, sleep-deprivation related memory loss that has just as much impact as dementia might have on an older adult.

You’ll notice that some conditions show up more often - ADHD impacts attention, but also working memory; Dementia obviously impacts many different aspects of perception. Similarly, the steps you might take to design for a population that includes nonnative speakers or language learners may be similar to the steps you take to support people with low literacy or dyslexia.

The last thing I have to say in this introduction is that there are no silver bullets or magic fixes - making accessible data visualizations is hard, and you have to know your audience and be willing to test things out - on yourself first, but then on populations you hope to target design changes towards.

Adapting Graphics for Accessibility

Let’s go from easy to hard…

Color Vision Impairment

• Avoid red/green combinations (rainbows, stoplights)

• Use palettes designed to be more accessible to people with impaired color vision [Good: Okabe-Ito, Tol. Avoid ColorBrewer.]

• Dual encode colors with other attributes (shape, linetype)

• Design your chart to be black-and-white printer compatible

Blind and Low-Vision Users

• Can screen reader users
  • navigate the document/site using a keyboard?
  • ‘see’ that a chart exists?
  • access a basic summary of the chart?
  • examine the data or summary stats directly?
• Accessibility Audit tools:
  • Chartability accessibility audit (top to bottom)
  • https://www.accessibilitychecker.org/ (W3C specs)

W3C (A) Guidelines

• Color is not the only visual indicator for information
  Dual encoding by another name

• Audio: if plays automatically, controls are provided:

  • Pause/Stop
  • Volume (independent of system volume)

W3C (AA) Guidelines

• Contrast:

  • 4.5:1 or 3:1 (large text)
  • 3:1 for UI and graphical elements

• Text adjustments:

  • 200% magnification
  • 1.5x line spacing, 2x paragraph spacing

• Text, not images of text

• No 2d scrolling required (responsive layout)

• Hover/focus content is persistent but can be dismissed

W3C (AAA) Guidelines

• Contrast: 7:1 or 4.5:1 (large text)

• Low/No background audio

• Text:

  • User-selectable foreground/background color
  • No more than 80 characters wide
  • 1.5x line spacing w/i paragraphs
  • 1.5 x (line spacing) b/w paragraphs
  • 200% text zoom does not require horizontal scrolling

Testing Contrast Values

5.70	2.46	1.39	4.77	3.30	7.24	6.54
3.68	8.54	15.09	4.40	6.36	2.90	3.21

1.00	4.42	21.00
21.00	4.75	1.00

• colorspace R package will calculate this for you
• https://cliambrown.com/contrast/

Accessibility for Screen Readers

Alt Text

• ggplot2, seaborn, matplotlib, SAS Graphics create images
• Graphics need to be “visible”
• Alt-text provides basic information to screen reader users

BrailleR

This is an untitled chart with no subtitle or caption.
It has x-axis 'bill_length_mm' with labels 40, 50 and 60.
It has y-axis 'bill_depth_mm' with labels 15.0, 17.5 and 20.0.
There is a legend indicating colour is used to show species, with 3 levels:
Adelie shown as strong reddish orange colour, 
Chinstrap shown as vivid yellowish green colour and 
Gentoo shown as brilliant blue colour.
The chart is a set of 342 big solid circle points of which about 98% can be seen.

More Accessible Graphics

• d3, Observable.js, Highcharts.js

• SVG-based graphics can be navigated by screen readers

• Utility depends on how the SVG elements are arranged

• OLLi: a toolkit for Observable and VegaLite graphics

  • structure svg graphics for screen-reader use
  • keyboard navigation
  • includes data tables and layered descriptions (overview, filter, details on demand)

Screen Reader Demo

• ggplot2
• Observable.js
• Observable.js + OLLi

Other Options

• Sonification
• Physicalization

Sonification

Physicalization

• 3D printers, embossers, etc.

This is an untitled chart with no subtitle or caption.
It has x-axis 'bill_depth_mm' with labels 14, 16, 18 and 20.
It has y-axis 'bill_length_mm' with labels 40 and 50.
There is a legend indicating fill is used to show density, ranging from 5.50919365996529e-09 represented by fill dark purplish blue to 0.0160915333509369 shown as fill brilliant blue.
The chart is a raster graph that VI cannot process.