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-
LEAVE A COMMENT

Advertisement

Building Philly’s own Amazon starts with fixing this city tax policy

Why Conshy beats Cali for this ecommerce company

EvoXLabs founder Ather Sharif joined a leadership program for people with disabilities

SPONSORED

Philly

Vistar Media’s tech stack is not for the faint-of-heart

Philadelphia

Senior Full Stack Engineer

Apply Now
Philadelphia

Perpay

Front-End Engineer

Apply Now
Philadelphia

Perpay

Digital Marketing Manager

Apply Now

Turn5 alums built their own niche site for souped-up European cars

More unicorns might finally IPO in 2018

Cool office alert: Turn5’s new HQ has a freakin’ bowling alley

SPONSORED

Philly

Grow your small business with Salesforce at this Jan. 10 event

Center City, Philadelphia

IntegriChain

Senior Business Analyst

Apply Now
Philadelphia, PA

IntegriChain

Senior Data Engineer

Apply Now
Philadelphia, PA

Linode

UX Designer

Apply Now

Sign-up for regular updates from Technical.ly

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