Highcharts and Elsevier share recent research into making interactive web charts more accessible. Our usability studies focused on improving intelligibility and understandability of non-visual user experiences of graphs and charts. We will share findings around the design of use case-based text descriptions and personalized charts. When we started our research into screen reader friendly charts eight years ago, we challenged the notion that a table version of the data was an equivalent and sufficiently accessible alternative. Since then, we’ve explored many features such as automated data point and structure descriptions, human created descriptions, and sonification or tones. We will share our research into examining different information seeking modes or use cases. What is the ideal user experience for use cases of: data point examination, identification of trends, and main idea extraction? Based upon these modes we will propose optimal designs for accessible data visualization consumption. With each of the new accessibility research questions we will provide real user feedback from non-sighted users on our approach. We will also show screen reader demos to help illustrate design considerations.

1. Simplifying
Accessible Data
Visualizations
Ted Gies
Marita Vindedal
Øystein Moseng
CSUN 2024
Thursday, March 21, 2024 - 2:20 PM PDT
Grand JK
Customized icon/illustration
or, an image of Chart / Photo

2. What do these people/things have in common?

4. Elsevier’s Mission
Elsevier helps
researchers and
healthcare professionals
advance science and
improve health outcomes
for the benefit of society.
4

5. Elsevier Relies on Highcharts to Depict Researcher Performance
Scopus Product Example

6. Data Visualizations are the foundation to Decision Making in Science and Health
Weekly Covid cases in U.S.: Source: CDC.gov

7. “Participants (127) described how at the early onset and most critical time of
the pandemic, they encountered broad inaccessibility, particularly of spatial
graphics, trends, and statistics.”
“For bar graphs, auditors struggled to access bar elements of the graph. “
The Accessibility of Data Visualizations on the Web for Screen Reader Users:
Practices and Experiences During COVID-19
Research Paper by Fan, D. Greco, L. out of Stanford

8. Do Data Visualizations Need to be
Simplified?

9. “You don’t need to simplify
the data visualization; you
just need to make it easier to
answer the research
questions”.

10. What problems do we really need to solve?
Usability &
Understandability
Unfamiliar viz types or
concepts
Lack of standards
Robustness
Verbosity & detail level
Scalability, big data
Personalization
Querying, questioning
Accessible data vs
accessible experience
Freedom of
exploration, navigation,
orientation
Time to actionable
insight, glance
perception

11. Verbosity - The quality of using more words than needed; wordiness.
• How detailed should descriptions be?
• What should the order of information be?
• How much control should the user have?

12. Drill-down principle
Start with the most important information
first, and let the user choose whether to dig
deeper, or move on.

13. What do these things/people have in common?

14. What do these things/people have in common? ANSWER
Stevie Wonder
Bar Chart
Grammy Data
Cats
Gauge Chart
Cats in the Room
Fruits
Bar Chart
Total consumed by M, O, T

15. Our Research Focus
Ability to change chart verbosity
Charts with real time updates/dynamic data
Different ways to navigate a chart with keyboard
Sonification user experience alongside the description

16. We gathered
feedback from 9
people who rely on
assistive tech
•
•
•
•
•
•
•
•
•

17. Gauge Chart (Cats Demo)
Considerations
• Verbosity of simple chart
• Knowing when zones change
• Sonification
• Importance of color
• Defining a “Gauge Chart”

19. Gauge Chart Design Conclusions
- Screen reader users are already inundated
with information and alerts
- Zones
- Sonification
- Not enough verbosity in the start
- The concept of gauge

20. Bar Chart (Fruit Consumption Application Demo)
• ARIA role=“application”
• Drill-down focused navigation
• Verbosity control
• Sonification

21. Fruit Consumption Chart - Drill Down
Title + high level description
Longer description, axis info
Screen reader directions
Application layer – 4 levels
L1 3 bars. Ted, Øystein, Marita.
L2 Ted, 12 fruits total.
L3 2 Strawberry, Ted.
L4 2 Strawberry, Ted. 1 from dessert, 1 from salad

23. Fruits Bar Chart Design Conclusions
• Nobody reads the manual!
• role=“application” robustness
• <button> immediately inside the application for safety
• SVG still marked up – touch interaction
• Freedom of exploration
• Sonification

24. Stevie - Bar Chart Considerations
• Rich visual tooltip
Verbosity settings
• Announce tooltip for
screen readers
• Hide null points for
screen readers

25. Demo of detailed tool tips and original screen
reader support

26. Stacked Bar Chart Design Conclusions
• Missed the 2-way navigation
• Tooltip details useful but want to
text search to navigate to chart
• Verbosity – liked the controls
• Grouping of the column
• ARIA-describedby on SVG-
elements slightly unreliable

27. Can accessible charts delight users?
“At least I’m getting the data, dammit”
“The sounds gave it almost a game like feel, normally
chart data is pretty boring”.

28. Example of a Delighting a User

29. What about compared to a data table?
The table is just as easy to navigate compared to the chart, but…
Table usability breaks down when:
• Nested column or row headers
• Users don’t remember table reading commands or too many keystrokes
• Users want to think in “chart data points” and “chart series” over table data

30. Thank you to our users/collaborators
Nick Giudice, U of Maine
Hadi Rangin, U of Washington
Brandon Biggs, Smith-Kettlewell Eye Research
Lucy Greco, UC Berkeley
Dr. Jon Gardner, ViewPlus
Sarah Russell, Blind Institute of Technology
Katya Cupryna, Blind Institute of Technology
Tristen Breitenfeldt, Blind Institute of Technology
James Warnken, Blind Institute of Technology
Mike Staffen, U. of Regina

31. Let’s Talk!
accessibility@highsoft.com
accessibility@elsevier.com
Ted Gies
Øystein Moseng
Marita Vindedal

32. Cats Gauge Chart
Fruit consumption bar graph
Stevie Grammy bar graph
Links to Demos

33. Previous CSUN Sessions
Making Sense of Large Data Visualizations
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

34. Most Cited Papers in Accessible Data Viz (from Elsevier Scopus)
Title Authors Year Source title Cited
Accessible Visualization: Design Space, Opportunities, and Challenges Kim N.W.; Joyner S.C.;
Riegelhuth A.; Kim Y.
2021 Computer Graphics Forum 46
Accessible Visualization via Natural Language Descriptions: A Four-Level Model of Semantic Content Lundgard A.; Satyanarayan A. 2022 IEEE Transactions on Visualization and Computer
Graphics
37
Information Visualization and the Challenge of Universal Usability Plaisant C. 2005 Exploring Geovisualization 21
How accessible is my visualization? Evaluating visualization accessibility with Chartability Elavsky F.; Bennett C.; Moritz D. 2022 Computer Graphics Forum 16
What makes web data tables accessible? Insights and a tool for rendering accessible tables for people with visual
impairments
Wang Y.; Wang R.; Jung C.; Kim
Y.-S.
2022 Conference on Human Factors in Computing
Systems - Proceedings
7
Sonify: Making visual graphs accessible Ali S.; Muralidharan L.; Alfieri
F.; Agrawal M.; Jorgensen J.
2020 Advances in Intelligent Systems and Computing 7
Using Web Standards to Design Accessible Data Visualizations in Professional Communication Strantz A. 2021 IEEE Transactions on Professional
Communication
6
Accessible data visualization in higher education Konecki M.; Lapierre C.; Jervis
K.
2018 2018 41st International Convention on ICT,
Electronics and Microelectronics, MIPRO 2018 –
Proceedings
5
Data, Data, Everywhere: Uncovering Everyday Data Experiences for People with Intellectual and Developmental
Disabilities
Wu K.; Tran M.H.; Petersen E.;
Koushik V.; Szafir D.A.
2023 Conference on Human Factors in Computing
Systems - Proceedings
2
SeeChart: Enabling Accessible Visualizations Through Interactive Natural Language Interface For People with Visual
Impairments
Alam M.Z.I.; Islam S.; Hoque E. 2023 International Conference on Intelligent User
Interfaces, Proceedings IUI
1
Accessibility standards and their implementation in custom data-driven maps Serna-Marjanovic I.; Tanovic A.;
Cerimagic A.
2020 2020 43rd International Convention on ICT and
Electronic Tech, MIPRO 2020 – Proceedings
1
Data Navigator: An Accessibility-Centered Data Navigation Toolkit Elavsky F.; Nadolskis L.; Moritz
D.
2024 IEEE Transactions on Visualization and Computer
Graphics
1

35. Relevant Papers
Accessible Visualization via Natural Language Descriptions: A Four-Level Model of Semantic Content (IEEE Transactions on Visualization and Computer
Graphics, MIT CSAIL, 2022)
COVID-19 Highlights the Issues Facing Blind and Visually Impaired People in Accessing Data on the Web (Stanford HCI Group, 2021)
Making data visualization more accessible for blind and low-vision individuals (MIT, 2022)
ChartVi: Charts summarizer for visually impaired (J of Computer Languages, International Institute of Information Technology, India 2022)
Towards Automatic Interpretation of Statistical Graphs for the Visually Impaired (Conf in SW Engineering Research and Innovation, Universidad
Veracruzana, 2021)
What Will You Tell Me About the Chart? – Automated Description of Charts (Conference on Neural Information Processing, Warsaw U of Tech, 2021)
Figure Captioning with Relation Maps for Reasoning (IEEE Applications of Computer Vision, Adobe Research Team, 2020)
Chart-Text: A Fully Automated Chart Image Descriptor (Spi Technologies India Private Limited 2018)
The Automated Understanding of Simple Bar Charts (Artificial Intelligence, Millersville University, 2011)
Automated interpretation and accessible presentation of technical diagrams for blind people (Universität Bremen, Germany 2004)

36. Highcharts, Elsevier 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>
Marita Vindedal <marita.vindedal@highsoft.com>
Øystein Moseng <oystein@highsoft.com>