/ dev

Accessible SVGs

Back in 2017 I had the very good fortune to be working with Alison Benjamin, who tipped me off about an upcoming talk from Léonie Watson. This turned out to be a great event! Léonie presented techniques for creating accessible, data-rich visualisations in SVG, including charts and even animations. Here are the slides from the evening, complete with code examples:

Making SVG accessible, Léonie Watson


Both Alison and I have since used some of these techniques in production.

Here's my first go at using table semantics to make accessible SVG charts in a Visual Journalism project:

Police panorama


Alison has given an in-depth talk of her own at one of the Town Halls, about using WAI-ARIA with d3 to create charts that work for screen reader users. Here's a video she made which demonstrates this in action.

d3 chart screen reader demo video


And here are slide from Alison's talk:

Using ARIA table semantics to improve a D3 line chart’s accessibility, Alison Benjamin


Accessible SVGs
Share this