BBC News: 'Falling through the pay gap'

This was an ambitious project experimenting with scrollytelling. The first big challenge was trying to visualise the dataset. We wanted to render a dot representing each company in the dataset, and animate these inline with the text. There were over 10,000 companies in the data, which is no small feat to render on a page. We managed to do this using REGL (based on WebGL) and D3.

I spent a lot of time making sure it was inclusive and accessible, this meant considering things like how users could interact with it using only a keyboard, or a screenreader.
I read about accessibility considerations in scrollytelling and animated content, and found one particular article of great help. We didn’t want people feeling overwhelmed or nauseated by our exciting new scrolly, so to cater to users with vestibular impairments, or those who just don’t like animation, I implemented a toggle at the beginning of the article. This was accompanied by a trigger warning - notifying users that this article contained animation and offering them an option upfront to stop that, without taking the content away from them.

I have had opportunites to speak about our experience developing this new storytelling format and making it accessible, speaking about the project at the Smashing Conference warm up party in San Francisco & the Creative Coding London meetup.

Visit the Site

Related Work

  • How much warmer is your city?
  • BBC News: Gender pay gap