/ 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

http://decks.tink.uk/2017/lws/index.html

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

https://www.bbc.co.uk/news/uk-44044537
https://github.com/bbc/newsspec_18891-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

https://www.youtube.com/watch?v=vq3RJuJ8Ee0

And here are slide from Alison's talk:

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

https://docs.google.com/presentation/d/1O755-gpcjxkIrwg7dsMFvVFk1cRPaJS3nEwBEPQXVWM/edit#slide=id.p

Accessible SVGs
Share this