Data Visualization and Accessibility on the Web

Session Summary:

Making data-driven visualizations accessible is no easy task. If those data visualizations are interactive and dynamic? This task can become even more daunting. Join a web engineer in Data Visualization and a design researcher in Accessibility in this Intermediate-to-Advanced lecture as they walk through their approach making accessible data visualizations on the web.

Description:

Very few out-of-box solutions readily exist that can adequately handle making dynamic, interactive data visualizations on the web accessible to people with visual or physical impairments. Even the best JavaScript charting libraries still require carefully crafting custom aria-labels, painstaking review of color and contrast, and other significant work for the developer (such as exposing interactivity). Well known Business Intelligence (BI) tools like Tableau, Power BI, MicroStrategy, etc. look towards simply offering a table of the data used for a chart, dashboard, or application to meet 508. However, if the chart is interactive and the table is not, do these BI solutions really offer “equal-access” to the user?

A 2017 National Health Interview Survey (NHIS) data release estimated 26.9 million adult Americans (or about 10% of all adult Americans) reported they either “have trouble” seeing, even when wearing glasses or contact lenses, or that they are blind or unable to see at all. (Source: National Center for Health Statistics, National Health Interview Survey (NHIS), 2017, www.cdc.gov/nchs/nhis.htm)

The traditional way of providing chart data in a tabular format as an alternative to navigating the chart’s graphic requires the user to switch to an alternate view to access the data. This alternate view lacks the visual representation of data as well as organization of information that benefits sighted users.

The goal is to provide equal experience of graphical charts. Therefore, an approach inspired by Highcharts and Amcharts is improved on which gives users with visual impairments the ability to understand dynamic charts and also gives users with motor impairments the ability to interact with and navigate individual data points independently. This improved approach meets Visa Global Accessibility Requirements (VGAR) that covers both WCAG 2.0 and WCAG 2.1 Level AA success criteria. Worth noting, this improved approach is designed to be easier for developers to implement.

The first part of this session will go over approaches that developers can take when building components for data visualizations that are dynamic (visualizations that can change when data changes) and interactive (visualizations that the user can interact with to change application logic or layout) as well as making accessibility as easy as possible for fellow developers or consumers of your components. This section will even go over some of our team’s working hypotheses in the data visualization space related to accessibility.

The second part of this session will simulate/demonstrate accessing data visuals for users with visual and motor impairments mainly covering keyboard and screen-reader accessibility test types.

At the end of this session we plan to set aside ample time for any follow up questions and feedback.

Practical Skills:

• Dynamic Web Data Visualizations
• JavaScript
• Accessibility Test Types

Prerequisites:

JavaScript and markup knowledge is helpful but not required.

Presentation Materials:

• Link to slide deck as provided by the speaker (external site) (external site) for