How Ticketleap made online ticketing more accessible

Our journey toward creating a more accessible product started a few months ago when the organizers of local hackathon #Hack4Access, Technical.ly Philly and Philadelphia Link, reported that attendees with visual impairments were having trouble registering using Ticketleap.

They were going to use another ticketing platform, until they discovered that our competitor’s accessibility was actually worse. Either way, it was an embarrassing moment for us, and a missed chance to stand out from the pack of online ticketing tools for the large group of people who use screen readers to explore the web.

Ticketleap had to consider a totally different way of experiencing the internet.

Around that time, a few of us on Ticketleap’s product team attended TEDxPhiladelphia, and we were inspired by a talk given by Austin Seraphin, the software programmer who himself is visually impaired. For Austin, the iPhone transformed his ability to use a phone and the internet due to its built-in accessibility features. Through Technical.ly Philly, we were able to meet Austin, and Philadelphia Link supported him in giving Ticketleap an accessibility review.

While Austin did his review, I brushed up on accessibility through websites like W3C’s Web Accessibility Initiative (WAI). I ran accessibility checkers on our pages. What I quickly found is that while the standards are a good first step, they are by no means a recipe toward making a usable, accessible product.

Austin’s review, on the other hand, was a window into a totally different way of experiencing the internet.

Content that looked great visually, when read aloud with a screen reader, was a jumble of text and code if it didn’t have the correct semantic structure. For example, Austin noted that our navigation header contained a list of three images that I couldn’t see. It turns out they we were preloading the images and positioning them off the page visually, but the screen reader still read them first.

To really understand the review, I did something that has been by far the most important part of improving our accessibility — I learned how to use Apple VoiceOver, a free screen reader available for Mac and iOS. VoiceOver has a steep learning curve, but within a day or so I was able to use it to navigate and listen to web pages.

VoiceOver, seen at bottom left, helped Ticketleap “see” its pages in a new light. (Image courtesy of Ticketleap)

With VoiceOver I noticed immediately how usually helpful elements like navigation bars, often read first at the beginning of every page, became barriers to the real content. Just imagine having to click through 20 or 30 elements on every page before you got to the good stuff. Suddenly I understood the WAI recommendation (see 2.4.1) to include a “mechanism … to bypass blocks of content.”

I also began finding my own issues. Turns out, in certain cases, our “Add to Cart” button didn’t work with a screen reader. Before doing this testing, our users leveraging a screen reader could not buy tickets.

By investing just a couple hours of developer time, we were able to fix the big issues on our event and checkout pages. We probably cut in half the time it took to navigate around those pages with a screen reader. And using VoiceOver we could test that our changes actually improved things.

While we were able to make some nice improvements, we have much work left to do. We’ve implemented some best practices for all new work going forward, but we still have the big task of going through our product, page by page, and making sure it’s all accessible.

At least now, thanks to some help, we know where to start.