Skip to Main Content

Session Summary

Complex charts and graphs are among the biggest challenges in digital accessibility, and lack clear guidance in WCAG. In this session, you'll learn how to identify common accessibility problems in data visualization, how to create effective alternative descriptions, and how to make accessible charts in SVG.


Description

Data visualizations, like charts, graphs, and diagrams, make it easy for many readers to identify and understand patterns in the data. But when not done properly, they can exclude readers with visual or cognitive disabilities.

In this session, we'll start by unlocking some of the neurological secrets that make data visualizations work so well for many sighted people, and apply similar principles to provide equivalent experiences for people with disabilities, especially visual disabilities. We'll delve into cognitive load theory, preattentive attributes and gestalt principles, attention management, and more.

Then we'll cover the challenges and benefits of different kinds of common data visualizations for different kinds of disabilities, including meaningful differences between low-vision and blind readers, and cognitive disabilities. We'll survey different techniques available for dataviz accessibility, such as sonification, the use and misuse of animation, and addressing some cognitive disability hurdles.

To help with ensuring dataviz accessibility within organizations, we'll explore emerging dataviz auditing techniques and best practices for developing data visualization style guides.

Alt text and long descriptions are usually not enough to make a chart truly accessible, but it provides a good start. We'll go over solid and simple techniques to craft useful and actionable text descriptions for charts. We'll help the the author decide which parts are important to describe in detail, and which to omit, in order to avoid overwhelming the user; we'll discuss how to provide suitable context and how to give users the ability to drill deeper into a longer description of important parts of the image, or to download the data in other formats.

Finally, we'll dig into the mechanics of using SVG, ARIA, and optional JavaScript to make an accessible chart, from the markup to navigation patterns. We’ll cover the built-in accessibility features of SVG and the dedicated ARIA graphics roles. We’ll talk about text and metadata text equivalents, such as the title and description elements and making sure they work as intended with ARIA. This will include live exploration of an SVG document with a screen reader. We’ll explore the importance of shape composition, document structure, reading order, managing navigation order, and element activation.

Finally, we'll open the floor up to live questions.


Practical Skills

  • How to evaluate a chart for accessibility.
  • How to create effective alt text for complex charts and diagrams.
  • How to make SVG charts accessible to screen readers.