Turning the tables on accessibility

A lesson on how to present data for all types of audiences

Lucy Monie Hall

Published on Tuesday, 22 February 2022

Accessibility  

Digital Tech Time on Accessibility Awareness: A member of the Guardian Accessibility Working group stands at a lectern, presenting a slide deck. The screen shows a diagram demonstrating the types of Accessibility requirements
Digital Tech Time on Accessibility Awareness: A member of the Guardian Accessibility Working group stands at a lectern, presenting a slide deck. The screen shows a diagram demonstrating the types of Accessibility requirements Photograph: Maria-Livia Chiorean/The Guardian

I work as a client-side developer at the Guardian, and until recently I was a member of the Subscriptions team. The focus of my team was to encourage readers to support us through digital subscriptions.

At the Guardian we believe in keeping quality journalism free and open for all. This means we need to highlight clearly to our readers why supporting us through a digital subscription is a good thing to do and present the benefits to them.

Why your support matters screenshot
Why your support matters screenshot Illustration: Lucy Monie-Hall/The Guardian

Through user experience research we tested ways to explain the benefits of a digital subscription and narrowed down the best ideas. We then tested those ideas alongside our own assumptions using A/B tests.

One idea that resonated most with our research participants was a comparison table. A comparison table allows readers to scan a series of product options, and tell them at a glance what they include. Something a bit like the table below, which compares the features of a series of products offered by Shopify:

Shopify prices screenshot
Shopify prices screenshot Illustration: Lucy Monie-Hall/The Guardian

I was the developer to pick up the task of making the comparison table component for an A/B test. The component felt well within my skill set – a UI component with non-dynamic contents – so I figured building it would be a cinch. I worked quickly, relying on tools in my comfort zone, like flexbox. In my mind, tables were deprecated (spoiler: they’re not), so I shunned them in favour of a list, thinking to myself that from a screen reader’s perspective, the content was pretty much a list.

Your subscription at a glance screenshot
Your subscription at a glance screenshot Illustration: Lucy Monie-Hall/The Guardian

My first inflection point was when I opened the page in Safari – one of my early confidence checks to ensure my code works in the browsers we support. Sure enough, it was broken. I sighed, figuring that flexbox was the likely issue. I decided it was time to be brave, and opened the CSS grid cheat sheet that I had bookmarked. Implementing CSS grid-columns turned out to be simple. It just worked.

It was at around this point that I started wondering about accessible tables best practice, and after reading ally-101, I realised that tables are not in fact deprecated – not at all. If you are trying to make a data table, this is definitely the correct semantic HTML to use. So I sheepishly removed

Continue reading

Get to the point! Why we added pinned posts to the Guardian’s live blogs How we have changed our application and hiring processes