Hack Days are a much-loved occasion at The Guardian. Over the course of two-ish days, developers work on a passion project of their choice, conforming more-or-less to a chosen theme, and then present it to the rest of the department.
Back in late 2020 we had our first pandemic-friendly remote Hack Day. This time around, our theme was Diversity and Accessibility. I had a lingering idea that fit the latter category after working with some good friends that year on an art project representing crater location data as music. My question was - how could the visual content of a data visualisation on The Guardian’s website be made accessible to people who are blind or partially sighted?
The below demo involves me running through my notably discordant demo, converting a Covid cases-per-day graph made by the Interactives team at The Guardian into a slightly chaotic audio experience.
How does it work?
The existing data visualisation draws data from a UK Government API and creates a dynamic graph using D3.js.
To handle the audio synthesis I used the Tone.js library, which provides APIs that abstract over the more low level Web Audio API, while the speech synthesis is handled directly through the Web Speech Synthesis API. Both of these APIs are handled well on modern browsers, but aren’t supported by Internet Explorer 11.
Working on the Audio Graph was a great experience, and it was rewarding to come up with a working demo, though it was a little rough around the edges (as hacks tend to be). I think there’s great potential in representing visual data in the audio medium, and in a perfect world this functionality would be available straight from the data visualisation library - spanning common types of data visualisation.