Software Development

How Ticketleap made online ticketing more accessible

When local hackathon #Hack4Access discovered that many of its attendees who were visually impaired had difficulty using Ticketleap with a screen reader, the company's UX head, Paul Nuschke, set out to fix it.

Rheagan King of Erose. (Photo by Stephen Babcock)

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.

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.

This is a guest post written by Paul Nuschke, Ticketleap's director of user experience.
Companies: TED / Ticketleap / Technical.ly

Before you go...

Please consider supporting Technical.ly to keep our independent journalism strong. Unlike most business-focused media outlets, we don’t have a paywall. Instead, we count on your personal and organizational support.

3 ways to support our work:
  • Contribute to the Journalism Fund. Charitable giving ensures our information remains free and accessible for residents to discover workforce programs and entrepreneurship pathways. This includes philanthropic grants and individual tax-deductible donations from readers like you.
  • Use our Preferred Partners. Our directory of vetted providers offers high-quality recommendations for services our readers need, and each referral supports our journalism.
  • Use our services. If you need entrepreneurs and tech leaders to buy your services, are seeking technologists to hire or want more professionals to know about your ecosystem, Technical.ly has the biggest and most engaged audience in the mid-Atlantic. We help companies tell their stories and answer big questions to meet and serve our community.
The journalism fund Preferred partners Our services
Engagement

Join our growing Slack community

Join 5,000 tech professionals and entrepreneurs in our community Slack today!

Trending

Trump may kill the CHIPS and Science Act. Here’s what that means for your community.

A week before Election Day, some Philly city employees question unexpected website change

How Philly officials keep your vote secure — and stop dead people from casting a ballot

A Pennsylvania voter’s guide to tech policy on the ballot in the 2024 election

Technically Media