I recently attended a birthday celebration at a restaurant for a family member and wanted to familiarize myself with the menu before arriving at the restaurant. I was able to find the menu in question through a mobile app.
I do not have much experience browsing menus through apps, having primarily relied on mobile websites for this task in the past. I went in with a positive attitude and hoped to have a good experience in terms of accessibility and usability. To my disappointment, however, this was not the case.
In the remainder of this post, I will detail the major accessibility flaw that I encountered, which essentially rendered the digital menu unusable. This discussion will exclusively pertain to touch-based screen readers.
About Me
I am Michael Taylor. I am blind and I use a touch-based screen reader on mobile. I rely on it to read what is on the screen, move focus through lists and buttons, and make choices in apps and on websites.
Initial Accessibility Impressions in the Restaurant App
I want to begin by stating that I initially found the structure and layout of the menu to be quite satisfactory. The menu entries were organized in list form.
When screen reader focus was placed on each entry, I could clearly hear the name of the dish, the description and ingredients, and the price.
Along the top edge of the screen was a horizontally scrolling menu bar that displayed the menu categories. I was easily able to swipe through and activate each option without issue.
Had the problem I will describe next not been in play, I actually think the menu would have been reasonably accessible.
My Screen Reader Could Not Scroll the Restaurant Menu
Having never eaten at this particular restaurant before, I wanted to explore the menu in detail from top to bottom. I began to swipe through the options, listening to each entry in order. All was going well until I neared the bottom of the screen.
Once I reached the point where the page ended and the visual content disappeared beyond the bottom edge of the display, the screen reader's focus cursor got stuck. Instead of my swipes advancing the screen position to reveal the subsequent set of menu entries, my screen reader returned the error notification sound that indicates that there is nothing left to focus on in the current navigation sequence.
I tried several times but could not get past the first page of menu entries. At this point, I had only heard the first four options in the “Starters” menu category. As an alternative navigation method, I performed the screen reader scroll gesture, which advances the screen by one full page. This, however, did not work either.
I was met with the same error sound, and a quick manual check revealed that the screen had not scrolled at all. I decided to change the category using the tabs at the top of the menu. Although this worked, I encountered the same scrolling issue in all the other menu categories. I was unable to access any content beyond the first few options in each category.
It was simply impossible to scroll the screen downward to reveal the additional menu entries.
What I Tried When the Menu Would Not Scroll
I tried resetting the app and device in the hope that this would fix the issue, but it was not successful. I even tried using the app on a device with a larger screen. While this allowed me to view more of the menu thanks to the increased screen real estate, the scroll functionality was still broken.
There was one more thing that I wanted to try. I turned off the screen reader, scrolled the screen manually upward, and then re-enabled the reader. While this revealed more of the hidden menu entries, it was not a good solution.
There was no way for me to gauge how far my scrolls were moving the screen without verbal feedback. I also had no way of telling if I had missed any menu options. At this point, I was compelled to abandon the digital menu.
I hit one issue, and the menu stopped for me. If the list had continued to scroll when I swiped, I would have heard every option and chosen with confidence.
Editor’s note — Who this helps (restaurants & hospitality):
Digital & Product leaders, UX/UI designers, Mobile Engineering (iOS/Android), QA & accessibility testers, Ecommerce/Online Ordering managers, Franchise & Operations leaders, Legal/Compliance, and third-party ordering providers.
For Restaurant Teams Exploring Digital Accessibility
If this scenario is familiar and you want to understand how guests experience your digital menus, explore our hospitality resources here:
Food Service and Hospitality Accessibility
Prefer a quick conversation about your app or menu flow, and how guests using screen readers move through it: Contact Us
Teams at Whataburger and Chipotle Mexican Grill partner with UsableNet to improve digital menu and ordering experiences for guests with disabilities.
This is a guest post from our marketing contributor, Michael Taylor. It reflects his opinions and experiences. Read more about Michael and some other posts on his experience online here.
