Skip to Main Content

Accessible Charts with SVG

taught by: Doug Schepers

Session Summary:

Images, charts, and diagrams are an important part of the web, but often hide critical information from people with visual impairments. Learn how to make accessible graphics with SVG. This session will teach you the basics of SVG, show you tips and tricks to make your graphics accessible, and give you the tools to open up the world of images to people with disabilities.

Description:

Scalable Vector Graphics has amazing potential to provide accessible images, diagrams, and charts. But you need to know how to unlock that potential.

This course will take the students from SVG novices to mastery of SVG accessibility, by walking step-by-step through handcrafting an accessible interactive diagram.

We’ll start with an overview of SVG, then delve into the syntax for making all the different types of SVG shapes.

Then we’ll jump right in with hand-coding a bar chart, to give the attendees hands-on experience with SVG and teach them the infinite canvas, the viewBox, the painter’s model of rendering, and layout in the coordinate system.

Next we’ll add accessibility to the chart, showing the built-in accessibility features of SVG, including existing and emerging ARIA attributes. 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. The attendees will practice live exploration of their SVG chart with a screen reader.

Next, we’ll detail the different ways to include an SVG image in your HTML content, and how to do so accessibly, including using SVG icons. We’ll learn to style SVG with CSS, and learn how to use CSS media queries and responsive techniques to make SVG even more accessible in different contexts.

Then we’ll touch on using JavaScript with SVG, just enough to become familiar with it. Most of the course will focus on markup, styling, and declarative interactivity, but it’s important to know what capabilities scripting can bring to SVG for accessibility.

We’ll explore the importance of shape composition, document structure, reading order, managing navigation order, and element activation.

Since a complex SVG is one big image, 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.

We’ll end the session with a recap of the skills they’ve learned.

Practical Skills:

  • SVG basics
  • SVG-specific accessibility techniques
  • WCAG and ARIA as used in SVG

Prerequisites:

Some experience with markup, CSS, and JavaScript