37th Annual CSUN Assistive Technology Conference Has Concluded

Accessible Next Level Visualizations

Date & Time

Friday, March 18, 2022 - 10:20 AM PST

Location

Elite 1-3

Description

Highcharts is a world-leading provider of accessible charting tools for the web used by 80 of the top 100 Fortune companies. The Highcharts accessibility features enable screen reader compatibility, voice input support, and keyboard access, helping to make the structure and data behind the Scalable Vector Graphics (SVG) visualizations more accessible.

Recently Highcharts and Elsevier's Digital Accessibility Team collaborated to expand from basic accessible graphs into features for creating accessible interactive charts, including stacked column charts, scatter plots, and charts with drill-down interactivity.

Like a simple bar chart, stacked column charts are commonly used to help compare quantities between categories such as time. Stacked column charts are often used to visualize data accumulated to a sum. Visually it's easy to compare column lengths between categories, but how would a non-sighted person do the same? In addition, how would a keyboard user prefer to navigate the data points in a stacked column chart?

Scatter plots are comprised of dots placed on an X-Y coordinate system, with the dots often representing experimental data. Scatter plots help discern patterns and correlational relationships in the data. What are some design considerations for a non-visual experience given the visual nature of scatter plots? How do we deal with large data sets often visualized as scatter plots? How can regression lines be added to scatter plots to help explain correlations and trends? How would a person using a keyboard navigate a scatter plot intuitively?

Interactive charts can employ drill-down behavior to explore rich hierarchical data sets. For instance, on a population map, someone may click on a country which drills down into a new data view for each state or province. Although a refreshed map/graph may be evident to a sighted person, what are the non-visual considerations when drilling down and navigating between data sets and views?

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.

About the Highcharts Accessibility Features

Accessibility experts were dissatisfied with providing just a table version as an equivalent to a chart and embarked on an experiment to make a useful and understandable SVG chart. It all began with a simple email from Elsevier to Highcharts with an offer to work together to improve the accessibility of an SVG chart library. Then began a collaboration between an accessibility expert from a large publishing company in America and a Norwegian UI developer sitting next to a beautiful fjord, 4 thousand miles away. Since 2016 Highcharts has provided accessibility features to open up charts and visualizations to screen reader users and other users with disabilities.

This Presentation Link is provided by the Presenter(s) and not hosted by the Center on Disabilities at CSUN. The Center on Disabilities has confirmed, as of April 1, 2022, content linked is relevant to the presentation, but has not been reviewed for accessibility nor will the Center on Disabilities attempt to remediate any accessibility issues in the linked content. Please contact the Presenter(s) with any accessibility concerns.

Audience

Higher Education
Information & Communications Technology
Media & Publishing

Audience Level

Advanced

Session Summary (Abstract)

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.

Session Type