Improving accessibility on the menu page
Recently, the menu page on the Just Eat Takeaway.com websites was rewritten from the ground up using Vue.js. From the start, we worked hard to ensure that the page was accessible by using a mixture of automated software and manual testing.
As with any technical changes, we continue to learn and adapt to ensure our platform is easily accessible for everyone. In this particular case, we became aware of some issues when adding items to the basket.
This post will follow the process that this issue went through from the point it was reported to identifying and fixing the issue.
Adding Items To Your Basket
One of the many new features we added to the rewritten menu page is the modal popup which appears when users click or press on an item — this is the primary way in which users can add items to their basket. We call it the item selector.
The item selector contains information about an item as well as groups of mandatory or optional choices (if there are any). One type of choice a user can make is for what we call a variation. For example a 10” or 12” pizza. Variations are typically a single choice and are represented in the HTML as radio button groups.
Accessibility Issues
Shortly after the release of the new menu page, we became aware of an issue where screen reader users attempting to select a radio button in the item selector were hearing an announcement that a selection had been made. However, it wasn’t allowing them to then add the item to their basket.
A screen reader is a form of assistive technology which helps blind and partially sighted people to use a computer. It allows users to navigate around software using their keyboard whilst it converts elements on the page such as headings, links, images, and other screen elements into speech or braille.
This issue was followed up by one of our user researchers who engaged with customers to understand how they use the website with a screen reader. This allowed us to gain valuable insight that we could then apply to any changes made on the website going forward.
Reproducing The Issue
Upon loading the website to test, the issue quickly became evident. The video below shows the experience on macOS with Voiceover where the keyboard is used to select the radio buttons. The radio buttons appear as though they are selected, however, the UI doesn’t update to indicate the selection was made and the “Add to order” button doesn’t become active, leaving us in a state where we cannot continue without assistance.
Identifying The Issue In Code
Looking into the code, we found the Vue template had a radio button and an associated label. The label had a @click event attached to it which works — as long as the label is clicked. However, if a keyboard is used to select the radio button (by pressing enter or the spacebar), the event won’t be triggered!
Fixing The Issue
To fix the issue, an @change event needed to be added to the radio button.
This means that when the radio button value is changed, the event is triggered. Then we can hook into that via our parent component to perform the required actions.
In the video below when the radio button is selected using the keyboard the UI is updated and the user can continue to add the item to their basket
Further Improvements
While fixing this issue, we noted another problem with the markup. When the user is navigating through the item selector choices, it isn’t clear which section they are currently on. They have to rely on moving back to the heading to get some context.
This is because we were using headings inside of a wrapping div.
Replacing the div & h4 with a fieldset & legend combination allows screen readers to provide some additional context when moving through the sections. By wrapping each distinct section in a fieldset, we can group related content which helps the screen reader to better understand the intention of the markup.
With these changes in place, instead of announcing “0.33L £0.90, radio button, 1 of 2”, the screen reader now reads out “0.33L £0.90, radio button, 1 of 2, Choose one, group”, providing that little bit of extra context to help users make their choice.
Wrapping Up
At Just Eat Takeaway.com, we’re committed to doing everything we can to ensure ordering via our platform is easy for everyone. According to the RNIB, there are estimated to be more than 2 million people living with some form of sight loss, and 350,000 people registered as blind or partially sighted in the UK.
By making these small changes to our codebase, we are allowing a larger group of people to be able to use our product, and have provided them with a much more inclusive experience that helps them to make their choices.
Just Eat Takeaway.com is hiring. Apply today!
