Week 11: Accessible Data Visualizations

​

CSE493e, Fall 2023

​

Venkatesh Potluri

Important Reminder����Make sure zoom is running and recording.��Make sure captioning is turned on.

Access check-in

• Please speak up if you have a question.
• If raising the hand is the best way for you, Jesse/Jen will get my attention.
• Jesse will read out questions from zoom.
• What can I do to make this accessible for you?

​

Class logistics

• TBD

Learning Goals

• Understand what it means to make data accessible.
• Learn about the state-of-the-art approaches to data accessibility.
• Question norms and assumptions around who participates in data work.
• Explore approaches to use data to prioritize data accessibility work.

What comes to your mind when we say�data visualization?

COVID-19 Visualizations

Some questions to consider about information access

• Who can access visualizations that other people have created?

​

• Who can create accessible information?

​

• How do we prioritize efforts to make data accessible?

​

• How do we support the full data science lifecycle?

​

Who can access visualizations that other people have created?

Some questions to consider about information access

Who can Access Visualizations?

Due to the inaccessibility of online data visualizations, screen-reader users answered questions 62% less accurately and spent 211% more time than non-screen-reader users (Sharif, 2021).

How Can We Make These Visualization Accessible?

• What strategies and techniques do you use to make these visualizations accessible to screen-reader users?

​

• What strategies and techniques could you use to make these visualizations accessible to screen-reader users?

​

Commonly-Used Techniques

• Summary ("Alt-Text")
• Sonification (Audio Graphs)
• Interactive graphs
• Tables
• Braille Printouts/3-D Printing

​

Summary ("Alt-Text")

Alt-text is an HTML attribute that can provide a summary of the visualization and the information it contains.

​

Benefits

• Most commonly-used strategy
• Easy to integrate into web elements

​

Drawbacks

• Limited to conveying what the author wants you to read.
• Does not give sufficient information to make your own conclusions from the data.

​

Sonification (Audio Graphs)

• Sonification (or audio graphs) enable listeners to interpret data trends by mapping data to an audible scale.
• Great at highlighting how the data changes.

​

​

Benefits

• Can help users to understand overall trends
• Already integrated into commercial products (e.g. Apple)

​

Drawbacks

• Can not convey specific data points.
• No standardization for sonification.

​

Tables

Tables are HTML elements that can be used to convey data to users.

​

Benefits

• Provide users access to raw data
• Already integrated into Google Charts
• Offers the ability to navigate information structurally

​

Drawbacks

• Can be too large
• Can not convey statistics

Tactile Graphics/3-D Printing

Tactile graphics and 3-D printed graphs are raised surfaces that enable blind and low vision individuals to interpret data by feeling the graphs.

​

Benefits

• Can assist users in developing a mental model of the visualization
• Enables users to interact with the visualization without using a screen reader

​

Drawbacks

• Requires expertise to produce
• Requires expertise to read

Holistic vs. Drilled-Down Exploration

• Which of these techniques enable holistic exploration?

​

• Which of these techniques enable drilled-down exploration?

​

Screen-reader users perform a holistic exploration first and then drill-down into the data (Sharif, 2021).

Supporting Interaction

Highly relevant even when just using a visualization

• When interacting with static visualizations, sighted people intuitively construct complex visual queries [Ware, 2019].
• Interactive charts afford selection, filtering & more [Yi, IEEE TOVCG, ’07]

Supporting this requires going past verbal descriptions and tactile graphics

​

Evaluation of VoxLens

VoxLens improved the accuracy of screen-reader users by 122% and interaction times of screen-reader users by 36%.

Best practices to describe graphs

• Guidelines
• enumerate visualization construction properties (e.g., marks and encodings)
• report statistical concepts and relations (e.g., extrema and correlations)
• identify perceptual and cognitive phenomena (e.g., complex trends and patterns)
• elucidate domain-specific insights (e.g., social and political context)

​

Lundgard Et al. "Accessible Visualization via Natural Language Descriptions: A Four-Level Model of Semantic Content". 2022

Who can create accessible information?

Some questions to consider about information access

Who Can Create Accessible Visualizations?

• Can BLV people create new information?
• Are they included in the employment opportunities and learnings associated with data science?
• Can they access information when someone didn’t already decide it needs to be accessible
• Maps and other individualized needs
• Live data exploration

​

Non-Programmers

Maptimizer

Generative Design

It is a common approach to support end users (used a lot for fabrication).

​

Lets each user specify their information priorities and preferred representations in familiar terms through a simple GUI

​

(Hofmann, CHI 2022)

What About Direct Authoring?

We should also support more advanced creation

• In Kim et al.’s survey of 56 accessible visualization papers published between 1999 and 2020, only two papers supported interactive authoring of charts by BVI users [Kim, CGF ‘21]

​

Equivalent experiences is an important access goal

• Same information conveyed
• Same interactive experience

​

PSST�

Based on RxJS: everything is a stream�

How do we prioritize efforts�to make data accessible?

Some questions to consider about information access

Figures in notebooks are inaccessible!

Figures in notebooks are inaccessible!

50% of notebooks contain at least 4 figures.

Figures in notebooks are inaccessible!

1% of notebooks containing figures have over 100 figures.

The Usage of ALT Text is Non-Existent

Popular Libraries can’t embed ALT Text

PNGs are the most popular figure type

Data-driven prioritization

• Prioritized engineering efforts to fix Matplotlib’s PNG backend.
• Unlike in research papers, subfigures were not frequently plotted.
• Maybe prioritize subfigures in a tool geared towards accessible publications?

How do we support the full�data science lifecycle ?

Some questions to consider about information access

Data Science Accessibility

• Data collection - not particularly supported (even coding tools very inaccessible)
• Data cleaning - not studied to my knowledge
• Modeling and Analysis - Common tools like Jupyter Notebooks wholly inaccessible
• Representation - Accessible visualization & data physicalization are the big opportunities

​

Why Notebooks?

Source: Adam Rule, Aurélien Tabard, and James D. Hollan. 2018. Exploration and Explanation in Computational Notebooks. In Proceedings of the 2018 CHI Conference on Human Factors in Computing Systems (CHI '18). Association for Computing Machinery, New York, NY, USA, Paper 32, 1–12. https://doi.org/10.1145/3173574.3173606

Are Notebooks Accessible?

Are Notebooks Accessible?

No

Are Notebooks Accessible?

https://jupyter-accessibility.readthedocs.io/en/latest/

Sources of Accessibility Issues

There’s more to inaccessibility than figures…

Number of Images in Each Notebook

Percentile of Notebooks

~60% of notebooks contain no images.

But are these accessible? … No, we’ll see why soon.

​

Notebook Consumption is Inaccessible

Jupyters’ Default Theme is Inaccessible

Jupyters’ Default Theme is Inaccessible

Jupyters’ Default Theme is Inaccessible

Simply changing the theme, addresses color-contrast based inaccessibility, reducing errors by 85%.

Key Takeaways

• How do we make data visualizations accessible?
• Alt text, sonification, tactile graphics.
• How do we evaluate the accessibility of data visualizations?
• Chartability (check readings!)
• Who creates data?
• Anybody!
• How do we prioritize accessibility efforts?
• An example that used data for this