Highcharts and Elsevier share recent research into making interactive web charts more accessible. Our usability studies focused on three areas, including stacked column charts, scatter plots, and charts with drill-down interactivity. We will share design considerations for keyboard navigation and the understandability of non-visual representations of data visualizations.

1. Accessible Next
Level
Visualizations
Ted Gies
Øystein Moseng
CSUN 2022
Friday, March 18, 2022 - 10:20 AM PST
ELITE 1-3
Customized icon/illustration
or, an image of Chart / Photo
bit.ly/a11ynextviz

2. Sharing our
research
Why Accessible Data Vis?
Drill Down Charts
Scatter Plot UX (Text Description, AI Description, Sonification,
Tactile Display)
Trend Line Approach to Large Data Sets
Screen Reader Demos!
User Feedback from 5 Screen Reader Users
Future Directions

4. Elsevier is a global information analytics
business specializing in science and health

5. Elsevier + Highcharts (Since 2015)!
• Started our collaboration by picking a fight with data tables
• SVG accessibility, augmented with HTML
• Sonification, annotations, dynamic data, interactivity
• What now?

6. “As a person who is blind,
how do I know if it’s safe
to travel locally if I can’t
see the data in a COVID
cases graph?”

7. “Our results show that due
to the inaccessibility of
online data visualizations,
screen-reader users
extract information
61.48% less accurately
and spend 210.96% more
time interacting with
online data visualizations
compared to non-screen-
reader users.”
(Sharif et al)

8. Drill Down
to look for something on a computer or website by moving from
general information to more detailed information
-CambridgeDictionary.org
to look at or examine something in depth
-Collinsdictionary.com

9. Drill Down in a Bar Chart

10. Drill Down Approach/Demo
Navigated to details for China. New bar series with 5
bars. Back to Country exports button.
Group: China, bar series 1 of 1 with 5 bars. Currently at
bottom level.
Button: Phone system devices, 223.2 billion USD
Group: Country exports, bar series 1 of 1 with 4 bars. Currently at top level.
Button: China, 2591 billion USD. Click to load detailed data.

11. Takeaways?
• Semantics: Are the interactive bars images, buttons, or links?
• Which screen reader mode? Cues for how to navigate?
• How do I get back to the last View?
• Which level am I at? How many levels are there?
• Verbosity – “Button: China, 2591 billion USD. Click to load detailed data.”
“I see, so now it gives me the components that make up that bar.”

12. Scatter Plots

13. Scatter Plots Are Used to:
Demonstrate the relationship between two variables (e.g., air temp and time of day or month)
(Weather – air temp lowers after 5pm in the day, goes up again after sunrise)
Identification of correlational relationships and patterns
Can use a mathematical model to predict weather temps in the future based upon past data

14. Challenges with Perceiving Non-Visual Scatter
Plots
• The term “scatter plot”
• Machine readability of the graph
• Information overload
• Freedom of exploration
• Data density
• Discovery of trends, shapes and
clusters

16. Our Approaches to Accessible Scatter Plots
1. Marking Up SVG data points
2. Table Version
3. Human Text Description
Novel Trend Line Approach
4. Computer Generated Description
5. Sonification
6. Braille Display/Tactile Tablet
Available in Highcharts today

17. Trend Line Approach An averaging algorithm to collapses
several data points in a segment down
into a single point.
The trend line is drawn through the
resultant/averaged points.

18. Scatter Demo 1 – Human Text Description
We see how the winning times overall improve for males and females over time. Male
marathon times start in 1897 and show a gradual linear decrease, with some
variation. Female marathon times start later - in 1966 - and show a sharper non-
linear decrease, which looks like a half of the letter U. After 1980 more marathons are
run by both males and females. Overall, male winning times are faster. Since the late
1980s, male and female winning times have decreased at a similar rate.

19. Human Text Description Take Aways
• Users overall responded positively to human created description.
• Describing the shape of the data/curve was deemed useful (“half of the letter u”)
• One size fits all approach might be a challenge (context: deep research or for general interest?)
• May eliminate personal bias of what we think someone might want to hear

20. Scatter Demo 2 – Computer Generated Description
The second data series is showing
Female class, with 233 data points
Female class data starts at Year
1966, where Winning time is
highest on average, averaging
around 03:18:53.
From there Winning time goes
down sharply until around Year
1978, averaging around 02:45:54.
There are 23 points in this
segment

21. Computer Generated Description Takeaways
“The AI description was cool, but maybe too detailed and kind of vague”.
Users wanted to go from Less Detailed > More Detailed.
Start with a less detailed human description then go into the computer description.
Limited freedom of exploration
Hard to make out the shape in a linear description.
Separate the computer description, don’t put it inside the actual chart data.
Would be amazing if we could describe the overall shape/direction in a meaningful way.

22. Scatter Demo 3 – Sonification

23. Sonification Takeaways
• Trend line concept wasn’t obvious to people who can’t see it
• Good for identifying trends, but not for getting precise reads of data points
• Users could discern basic trend for Y value: upward, downward and change in directions using
sound
• Stereo panning L/R also provided a sense for a second dimension (moving along the x axis left to
right)
• Some users wanted “scaffolding” to help relate sounds to a baseline set of values
• Avoid screen reader announcements on top of sonification
• Most users thought that being able to step through the sonification would be useful
• Users had conflicting preferences

24. Scatter Demo 4 – Tactile / Braille Tablet
Demo of the Peridot
Tablet
48 X 64 dot resolution
Featuring
Dave Schleppenbach
and Dr. Greg Williams

25. “using a trendline to
analyze is very useful,
because you're pulling
out information that you
would not be able to see
in the scatterplot.”

26. Tactile Takeaways
• Best version in terms of freedom of exploration, ability to discover trends and shapes.
• Dots can blur together into “blobs”.
• Users will need to pan, zoom, tuning threshold detection.
(small window like a braille display)
• Circles and square markers work better than other more complicated shapes.
• How to disambiguate multiple data series (blinking dots).
• Promise to provide a rich, co-operative learning tool between 2 people.
• Unfortunately, tactile tablets are expensive $$$.

27. Summary of 7 Approaches to Accessible Scatter Plots
SVG data
point aria
labels
Table
Version
Sighted
Person Real
Time
Description
Human
Created
Description
AI Description Tactile Display Sonification
Pros Easy to query Table
Reading
Commands
are quick and
sophisticated
Easy to query
Contextually
relevant
description
Can provide a
more
meaningful
interpretation of
data
No additional
effort by
content
creators
Freedom of
exploration
2-D or 3-D data
representation
2-D or 3-D data
representation
Cons No sense for
trends
Bias of people
predicting what
they think you
want to know
Reliance on
another human
Not always
contextually
relevant
Requires
advanced math
and algorithms
No one size fits
all approach
Expensive
Requires some
training (e.g.,
adjusting
threshold
detection)
Difficult to layer
different data in
same graph
Need
scaffolding
context,
training
Identify
Trends?
No No Yes Yes Emerging Yes Yes
Freedom of
Exploration?
Limited Yes No No Limited Yes Limited

28. Future Directions
• Tactile display with announcement of data on PC
• Accessibility Menu
• Sonification tools
• role=“application”?
• Breadcrumbs for drill down
• Highcharts authoring accessibility checker

29. Thank You
Ted Gies
Øystein Moseng
www.linkedin.com/in/tedgies
www.linkedin.com/in/oysteinmoseng

30. Thank you to our users/collaborators
Dr. John Gardner (ViewPlus)
Dr. Nicholas Giudice (U of Maine)
Lucy Greco (UC Berkeley)
Hadi Rangin (U of Washington)
David Schleppenbach (Tactile Solutions)
Ryan Shugart (Microsoft)
Dr. Greg Williams (Independence Science)

31. References
Highcharts accessibility demos
Highcharts accessibility portal
Highcharts accessibility module
Sonification API
Highcharts Features History
YouTube: Highsoft and Elsevier Talk About
Accessibility 2020
Understanding Screen-Reader Users’ Experiences
with Online Data Visualizations (Sharif, et al)
Contact Us
Ted Gies <ted.gies@elsevier.com>
Øystein Moseng <oystein@highsoft.com>

32. Previous CSUN Sessions
VPATs for Business or Measure
Accessible SVG charts using ARIA
Elsevier: Article of the future collaboration
Accessibility for Large Publishers: Challenges,
Choices, Change
Alt Text – A Process of Discovery
Don’t Play Me – 2 Games in Web Accessibility
Elsevier Company Accessibility Policy

33. EXTRA SLIDES

34. Our 6 Approaches to Accessible Scatter Plots
SVG data
point aria
labels
Table
Version
Human
Created
Description
AI
Description
Sonification Tactile
Display
Identify
Trends?
No No Yes Emerging Yes Yes
Freedom of
Exploration?
Limited Yes No Limited Limited Yes
Novel Trend Line Approach

35. A. I’ve never experienced an accessible visualization
B. A Table
C. Have a sighted person explain it to me real time
D. Human created text description
E. AI generated description
F. Tactile Display
G. Sonification
Poll:
What is the best way to experience accessible visualizations on the Web?