Over the past few months, I have written a series of blogs about the accessibility challenges that affect various mobile websites when using touch-based screen readers.
In this blog, I'll narrate my real-world experience with a mobile website. Since I love baseball and want to attend a game before the summer ends, I decided to focus on my experience buying tickets. Before I continue, if you find this narration about how I use my screen reader online informative, or if you want to learn more about the experiences of a person with a visual disability navigating the digital world, I encourage you to download my e-book, Accessibility Insights: A Screen Reader User’s Guide.
It's also worth noting that much of what I mention here applies to mobile applications, which often suffer from similar accessibility flaws.
Ticket Search
Upon launching the ticket website, I began a round of preliminary navigation to familiarize myself with the homepage layout. I used one-finger manual swipes to move one item at a time.
The page's first few sections include sports news and advertisements for special games with collectible giveaways. Not interested in these, I kept swiping until I found a section labeled "Join Us At The "Stadium. Under this heading, I located a link labeled "Browse Ticket "options.
I activated the link with a double tap and was taken to the next page. Using an accessible drop-down menu, I selected the number of tickets. Next, the website prompted me to choose my preferred date of attendance.
Initially, I was concerned about the calendar grid for date options. Still, after quick testing, I found it one of the most accessible. As my screen reader focused on each available date, I would hear the day of the week, the date, and the two teams involved in the match-up.
After selecting the date and team match-up I wanted with a double tap, the screen reader announced the option "Selected" upon a refocus, which is excellent for accessibility.
Once I had chosen a game to attend, I set my screen reader to filter by button only, using the rotor to bypass the rest of the calendar grids. I swiped until I found a button labeled "Continue To Choose A Section." Up until this" point, everything was working well regarding accessibility.
Take the Website Accessibility Remediation Quiz
Section Selection Troubles
With this interaction, accessibility began to go downhill. The next page that loaded allowed customers to choose their desired stadium seating section. As I started to explore the page, I quickly needed clarification.
First, there were unlabeled images everywhere that my screen reader announced as "Image." Worse yet, these images created a navigation trap, as I used manual swipes to move down the page.
Whenever I encountered one of these images and tried to move past it, my screen reader would play the error notification chime, indicating that there was nothing further to navigate in that sequence. The only way to overcome this was to use direct touches to move down the page and past the image.
I heard random numbers and letters that likely refer to sections and rows at other points. However, these were announced in no particular order and made very little sense out of context. I used direct touch to move around the page until I heard the section number I wanted.
I eventually found it, activated it with a double tap and hoped that the selection would be successful because there was no verbal feedback for confirmation.
Fortunately, I know the seating sections of this particular baseball stadium fairly well, so I managed with the limited information available. However, the site's selection page would have lost another mobile screen reader user if that person was unfamiliar with this stadium.
Moving to Checkout
At the bottom of the page, I found a button labeled "Confirm Section Choice." I activated it and was brought to a screen asking me to choose my ticket delivery method. I picked digital and activated the "Continue" button.
After this, I went through a series of checkout steps, including entering a billing address and payment method. I was pleasantly surprised that all the steps worked well, with no accessibility trouble.
Digital Ticket Trouble
Once I completed my ticket purchase, the site gave me a downloadable digital ticket to print or save to my device for entry to the stadium. To my dismay, however, the digital ticket was utterly inaccessible.
A sighted person confirmed that it contained details such as the seat and section numbers, a scannable barcode, a customer service phone number, and other incredibly useful information. The screen reader did not read any of this aloud.
If I tried to navigate around the digital ticket using direct touch or manual swipes, my screen reader would return the error notification chime, indicating that there was nothing on the screen to focus on. Unfortunately, digital event tickets are almost always accessibility disasters.
Read more about challenges and best practices for website accessibility in event websites here.
Reflecting on Accessibility Challenges
I hope this narrative illustrates how accessibility problems on mobile event ticket websites manifest in real-world scenarios. Although I eventually purchased tickets online, the process was sometimes challenging.
Regarding mobile screen reader accessibility, even one major flaw can derail the entire web experience and lead users to abandon their tasks. While I was able to complete my purchase, others might be less fortunate, especially when navigating the seat selection page.
Join Us for an Upcoming Webinar
Experience firsthand how blind users navigate the web! Sign up now for our upcoming webinar, "How a Blind Person Uses a Website," where you'll witness a live demo and gain exclusive insights from experts. Don't miss this unique opportunity to deepen your understanding of accessibility!
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.