How to host an accessibility hackathon

After realising that some of our customers were not able to properly use our website as it was not fully accessible, we used a one day hackathon to identify and fix as many of the issues as we could.

It was recently announced that none of the world’s top 50 retail websites adhere to the five key criteria of the Web Content Accessibility Guidelines (WCAG) as outlined by the Web Accessibility Initiative. Around 15% of the world’s population report some form of disability that impacts their ability to navigate a website and given the reliance on online ordering over the last year, accessibility is more important than ever.

Our customer care has seen a slight increase in the number of customers who were getting in touch with us due to accessibility issues on our website, apps and also physical recipe cards. As a result, we’ll be having an accessibility audit later this year, but we felt it was important to deal with some of these issues as soon as possible and also to increase our engineers’ awareness of the accessibility issues we’re facing.

The answer — a hackathon! We have Tech 10% time every other Friday (time which engineers can use to work on anything they want to, which may be connected to the gousto product or personal development) and we used one of these Fridays to host the hackathon. We had five teams sign up; 4 web teams and one android team. Engineers get very competitive, so we obviously had to make it a competition with prizes available.

Each participant was sent an instructions manual with a list of resources that would help them with their accessibility quest, along with a chocolate hamper to keep them going throughout the day.

We devised the following point structure:

FINDING AND LOGGING ACCESSIBILITY ISSUES — 5pts
FIXING ACCESSIBILITY ISSUES — ‘one liners’ — 10pts
FIXING ACCESSIBILITY ISSUES — ‘big fixes’ — 15pts

We set up a jira board with five columns:

• Triage — a basic outline of the problem, ideally with a screenshot
• Refined — once a ticket had enough detail to be fixed
• In progress
• PR raised
• Passed on to the relevant team — post hackathon, we dished out the remaining tickets to other teams so they could add them to their backlog

Each team in Gousto has certain key journeys that fall under their domain, for example, the Radishes are responsible for the Menu and one of their key journeys is to be able to select 4 recipes and submit that as an order. We advised each team to focus on their key journeys and to try and navigate that journey using various accessibility tools. For example, can you place an order whilst solely using a screen reader as a vision-impaired person would need to? Can you place the same order by only using a keyboard and no mouse as someone with arthritis might need to?

Happy Hacking

After a morning introduction session, the teams were off. Apart from Android who decided to lead their own mini knowledge sharing session (would this tactic pay off?). We all knew that we had a fair amount of issues on our website, but we didn’t expect the tickets to come in so thick and fast. Like I said, engineers are competitive…

By lunchtime, we had 64 issues on the board which covered all areas of the site and the android app. Engineers were using screen readers, keyboard navigation, colour contrast tools, screen blurring tools and changing the font size in order to find any problems we had.

Android had also started fixing issues which meant they were earning bumper points (their extra learning session obviously did pay off). The most important learning from the morning?

“Today I learned that Shift+Tab will move the focus backwards 😄”

The day was due to finish at 3.30pm, by 3.10pm there was a 5 point difference between Android and one of our web teams — Jalapenos. It was tense. There was a sudden influx of PRs from the Jalapenos, but then in a surprising twist Android had gone back and logged some more issues. By 3.30pm it was neck and neck.

Unfortunately for Android, they realised that one of their tickets had actually been duplicated by two people 🤦🏽‍♀️ They’re obviously a very honest and conscientious squad, but it meant they lost out to the Jalapenos.

By the end of the day, we had 94 individual issues and 17 had been fixed. This is way more than we were expecting. Some of them will just require a quick fix, like adding an alt tag to an image, but some of them will require a lot more thought and work to restructure the page. We had a few tickets connected to colour contrast issues within the Gousto colour palette, this will be something that engineers have to work on with design to fix.

Although it was a fun day, the most important thing was that our engineers learnt about what they should be doing to ensure that our site is accessible to everyone.

Today I’ve tried for the first time to only use a screen reader and keyboard.. it’s been hard and it made me think of how many things we take for granted & understand the importance of accessibility even more.

Following on from the hackathon, Android are adding an accessibility check to their PR checklist so they must have considered accessibility before they raise a PR. Our web teams will be doing something similar.