Towards Fully Accessible Data Visualisation

Volker Sorge

Scientific Document Analysis Group

School of Computer Science

University of Birmingham

Progressive Accessibility Solutions

Birmingham, UK

progressiveaccess.com

joint work with

A. Jonathan R. Godfrey (Massey University, New Zealand)

NIST, Gaithersburg, 8 June 2017

Volker Sorge Towards Fully Accessible Data Visualisation
Introduction

Data visualisation is increasingly important

Statistics thrives on visualisation, diagrams are everywhere

starting in elementary school

in everyday publications: newspapers, magazines

in the workplace

People with visual impairments are often excluded from

accessing crucial information

Allow VI users to become creators not just consumers of

visualisations

Volker Sorge Towards Fully Accessible Data Visualisation
Motivation and Aims

Bring together

Jonathan’s work on tactile graphics in R

Jonathan is blind and a statistics professor x

Needs to create meaningful diagrams himself

My work on web accessible STEM diagrams

End-to-end workflow for (some) STEM diagrams, using image

analysis, semantic enrichment and a web interaction model

Can we generate web accessible data visualisations?

Can we support working VI statisticians/students directly?

Volker Sorge Towards Fully Accessible Data Visualisation
Overview

Accessible diagram problem

Type of data visualisations

General navigation model

Workflow interaction model

Demo

Conclusions

Volker Sorge Towards Fully Accessible Data Visualisation
Scientific Diagrams

Volker Sorge Towards Fully Accessible Data Visualisation
Diagram Accessibility: The Past

Learning and reading material in Braille, tactile graphics, . . .

Textbooks audio recorded by expert readers, allowed for

independent study

Use of models, tactile prints, swell paper, etc. in class

All this is already gives VI readers a considerable disadvantage

But it gets worth with modern material

Volker Sorge Towards Fully Accessible Data Visualisation
Diagram Accessibility: The Future

Most content is in electronic form

Anyone can prepare material

Information is ephemeral

More and more moving to the web

Content is more an more geared towards impressive

visualisations

Thread: Danger that the accessibility gap widens

Opportunity: The Web is ubiquitous

Volker Sorge Towards Fully Accessible Data Visualisation
Web Accessible Diagrams

Leverage power of web applications and assistive technology

Embed information and data into a diagram

Interactive exploration of content

Speech generation for Screen readers

Synchronised highlighting and magnification

This talk is about statistics

But we also have other STEM diagrams, e.g., chemistry,

physics, . . .

Volker Sorge Towards Fully Accessible Data Visualisation
Discrete Data Graphs

Not necessarily Discrete Data!

But a “discrete” presentation of data

Examples: Histograms, Boxplots

Volker Sorge Towards Fully Accessible Data Visualisation
Continuous Data Graphs

Not necessarily Continuous Data!

But a “continuous” presentation of data

Examples: Time series, scatter plots

Volker Sorge Towards Fully Accessible Data Visualisation
System Background

R programming language and software environment for

statistical computing

efficient manipulation of statistical data

plethora of visualisation options

BrailleR Extension to turn R graphics into tactile diagrams

Tactile graph components

Braille translation of text

DIAGcess Javascript library for screen reading and interactive

exploration of SVG diagrams in any browser

combines annotated SVG with an XML

navigation structure

Volker Sorge Towards Fully Accessible Data Visualisation
Creating Accessible Diagrams

R offers a number of different renderers

many produce SVG, some even good SVG

we chose gridSVG which generates highly structured SVG

already provides considerable semantic grouping

Compute semantic information to explain the diagram

Start with R model that contains all statistical data

Generate speech annotations for diagram elements

Volker Sorge Towards Fully Accessible Data Visualisation
Creating a Navigation Structure

Generate Abstraction Graph for navigation and explanation

Represent diagram as multi-layered graph

multiple layers of abstraction

“fit” XML to SVG via element ids with three element types:

active, passive, grouped

Graph structure serves as bases for interacting with diagram

Very simple navigation model: down/up, right/left

Volker Sorge Towards Fully Accessible Data Visualisation
Navigation Model (Boxplot Example)

top level summary

title

title

sub-title

. . .

x axis

label

tick 1

. . .

y axis

. . .

data content

data element 1

additional details

Volker Sorge Towards Fully Accessible Data Visualisation
Navigation Example

boxplot

median

lower quartile and upper quartile

lower whisker and upper whisker

outliers

outlier 1

.

.

.

outlier n

Volker Sorge Towards Fully Accessible Data Visualisation
Accessibility Support

Screen Reader Support:

Generate speech output from XML annotations

Display of speech output using subtitling

Low Vision/Learning Disability Support:

Highlighting of inspected components

Optional zooming and magnification of components

Changing contrast, colour configurations

Volker Sorge Towards Fully Accessible Data Visualisation
Example: Exploring a Histogram

Intial top level summary

E.g. “Histogram of Ozone” or verbose

“Histogram showing 9 bars for Ozone over the range 0 to 150

and Frequency from 0 to 30.”

Volker Sorge Towards Fully Accessible Data Visualisation
Example: Exploring a Histogram (cdt.)

First level exploration of 4 major components

Title: “Histogram of Ozone”

X axis: “X axis Ozone ranges from 0 to 150”

Y axis . . .

Data content (summary)

Volker Sorge Towards Fully Accessible Data Visualisation
Example: Exploring a Histogram (cdt.)

Next level: Diving deeper into components to get more details

E.g. for data content:

Explore every bar separately

E.g., “Bar 4 at 70 with value 15” or verbose

“Bar 4 between x values 60 and 80 with y value 15 and density

0.00647”

Volker Sorge Towards Fully Accessible Data Visualisation
Navigating Continuous Data

Apply the same navigation model on the data component

Split continuous curve (recursively) into intervals

Exploit discontinuities if possible

Otherwise rewrite SVG diagram to allow navigation of partial

curves

Volker Sorge Towards Fully Accessible Data Visualisation
Interaction Model for Data Exploration

Support typical workflow for a working statistician in R

Recurring process of model refinement by

data generation and manipulation

data inspection and visualisation

adaptation of the data and modification of the current

statistical model

Replace canvas based by browser based visualisation

Automatically open and shift focus to browser tap

Combined with work in accessible environment like Shell,

Emacs, etc.

Volker Sorge Towards Fully Accessible Data Visualisation
Evaluation

Expert evaluation

Feedback from 10 power users

Exclusively positive

People want to get involved

User Study

12 non-expert users

Generally very positive

Demand for Braille output and sonification

User study with audio tactile diagrams in July

Volker Sorge Towards Fully Accessible Data Visualisation
Conclusions & Future Work

Work should aid with learning, teaching and employment

Extending to more types of diagrams

Adding sonification for recursively exploring continuous curves

Demonstrates transferability of navigation model

Fits into ongoing work of making STEM diagrams accessible

Volker Sorge Towards Fully Accessible Data Visualisation
References

BrailleR available via CRAN in R

Web References

Demo:

https://zorkow.github.io/BrailleR/www/

BrailleR package:

https://github.com/ajrgodfrey/BrailleR

https://www.r-pkg.org/pkg/BrailleR

Chemistry examples:

https://progressiveaccess.com/chemistry

Acknowledgements

Do ̃nal Fitzpatrick, Dublin City University, Ireland

Paul Murrell, University of Auckland, New Zealand

Volker Sorge Towards Fully Accessible Data Visualisation