How Ticketleap made online ticketing more accessible - Technical.ly Philly

Dev

Nov. 10, 2014 12:45 pm

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.

Ticketleap Director of User Experience Paul Nuschke turned to VoiceOver, pictured on the monitor, to help make the site usable for those with visual impairments.

(Photo courtesy of Ticketleap)

This is a guest post written by Paul Nuschke, Ticketleap's director of user experience.

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.

Advertisement

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.

You must appreciate accurate, relevant and productive community journalism.  Support this sort of work from professional reporters with seasoned editors.  Become a Technical.ly member for $12 per month
Organizations: Ticketleap, Technical.ly
Projects: TEDxPhiladelphia
-30-
JOIN THE COMMUNITY, BECOME A MEMBER
Already a member? Sign in here

Advertisement

This app generates startup names from Hacker News so your company can totally crush it

This nonprofit got a $20,000 Comcast grant for assistive technology

3 reasons why you don’t want to miss the 2018 Timmy Awards

SPONSORED

Philly

Clients and community come first for Vanguard employees

Chesterbrook, PA

Deacom

IT Specialist

Apply Now
Malvern, PA

Vanguard

Sr. Full Stack Developer-Client Experience Lab

Apply Now
Malvern, PA

Vanguard

Product Owner of Data Science Solutions

Apply Now

CS4Philly needs your help getting computer science into Philly schools

Here’s why Minecraft matters for Philly public schools

Learn why ‘the channel’ is worth $1.5 trillion and growing: Oct. 9–12

SPONSORED

Philly

UX, UArts and the importance of human-centered design

Malvern, PA

Vanguard

Java Developer-Entry

Apply Now
Malvern, PA

Vanguard

Technical Lead-Full Stack

Apply Now
Center City Area

Inspire

Product Manager

Apply Now

Sign-up for daily news updates from Technical.ly

Do NOT follow this link or you will be banned from the site!