April 15, 2015

How Kickstarter Got Subtitles and Captions

Last week, Kickstarter added an important new feature to its website: the ability for people to place captions and subtitles on the videos they upload. Project videos have always been a huge part of Kickstarter — they’re a chance for creators to speak right to you, explain who they are, and demonstrate what they’re trying to make. Everyone in the Kickstarter community should be able to access the information in those videos, and captions and subtitles bring us a lot closer to that goal. More than 8 million people have backed Kickstarter projects — people in nearly every country on Earth, across countless languages, and all different levels of hearing. Now, Kickstarter creators can make what they’re saying accessible to more and more people, all across the community.

Of course, adding this feature isn’t quite as easy as just flipping a switch. It’s the result of a long process, a lot of hard work, and a fight to really live up to our values. Here’s how we got there.

Our company has an event called “Hack Day,” which is sort of a misnomer. Hack Day isn’t limited to engineers, nor is it limited to the traditional television idea of “hacking,” with viruses and green-on-black code cascading down a monitor screen. It’s hacking in another sense: creating things, the core of our company. For the engineering team, it’s an opportunity to explore ideas they might not otherwise have time for. And sadly enough, accessibility had often been one of those things.

Before our fifth Hack Day, one of our engineers, Tieg, approached me and said he had an idea for a project. Actually, he had about twenty ideas. But he was really excited about one in particular, and since I had recently joined Kickstarter, he was wondering if I wanted to help. I said yes, of course. This idea was something I’d wanted to do since before I joined Kickstarter: adding subtitles and captions to videos.

Here’s where things start to get a bit technical. Every Kickstarter video was HTML5 by default, not Flash, and we discovered that HTML5 already had a spec for text tracks. And in fact, every browser supports text tracks, except for IE9 and Opera Mini. So all we had to do was add elements to the video. Each element has a src attribute that links to a file in the WebVTT format — a way to encode timed text, also known as subtitles and captions.

Hack Day is only 24 hours long, so we didn’t have time to make an involved tool. For our first version of subtitles and captions, you had to manually write your text in a WebVTT-conforming file. But it did the job — it added subtitles and captions to video. When we demoed it to the whole company in our office theater two days later, the room erupted in applause. “Ship it!” someone called.

Shipping it took a year.

The challenge, of course, was creating a tool that enabled people in the Kickstarter community to put together their own subtitles and captions — easily, intuitively, and without needing to know what a WebVTT file is. Whenever I had downtime during work hours, I’d work on the tool.

We had a lot of huge tasks and new product initiatives in front of us, and this project didn’t have top priority. But it was never far from my mind, and my manager, Justin, was just as eager to get it finished. By myself, there was only so much I could do. But Justin was happy to test the user experience, give feedback, and make sure I had time to spend on building and polishing the code. He also sent out a query for a designer and product manager to help bring the project to completion. Slowly, the tool started to take shape. And as 2015 began, the project picked up speed — and got a designer and a project manager, Keith and Ian.

Our captioning tool started out with three distinct sections: The video, a caption text display, and a timeline that showed when subtitles and captions should appear. But there was always something off about the flow. With Keith’s magic touch, the caption text display merged into the timeline, and we made the timeline editable. So now you only had to focus on two things. And packed inside that little timeline was a whole world of functionality. Ian sacrificed some of his life force to simplify it. To create a new caption, you used to have to click the timeline while pressing Shift; now you just press Enter. You used to be able to jump around the timeline while the video was playing; now you can only do that when the video is paused, which avoided a host of other subtle bugs. Ian also recommended that we go beyond just captioning project videos, and add the feature to any video uploaded to Kickstarter. Every single interaction in the tool was carefully decided on.

The thing about simplicity is that it takes a long time to arrive at. And I’m extremely proud of the tool that Keith, Ian, and I made, originating from a hasty little Hack Day project Tieg and I started one year ago.

One of our core values at Kickstarter is the idea that creativity is for everyone. That’s so much of why Kickstarter exists in the first place — to make it possible for more people to get involved with and experience creative work. Subtitles and captions are just one step in really living up to that ideal, and working to make sure everyone belongs here. It’s not just about a product, either. It’s a small but meaningful shift in ideals. We’ve started captioning our YouTube videos. We have live transcription at our engineering events. We’re bolting accessibility onto our website, for all types of users, for all languages, hearing levels, sight levels, mobility levels.

And now accessibility at Kickstarter is becoming a priority.

Like what you're reading?
Sign up to receive the latest articles and updates on nonprofit tech from NTEN and its community of experts.

Subscribe

David Peter
is a software engineer at Kickstarter, has a dream to live next to an ocean with a dog and warm weather. His other dream is to be a traveling writer. He dabbles in illustration, game-making, learning languages, equestrianism, dance, playing the piano and ocarina, and picking up other random skills to add to this list. You can find David on Twitter @davidnoob.
Interest Categories: Websites
Tags: accessibility, website accessibility