Cassette tape labelled with Accessibility
Posted on July 27, 2014 by

Website Accessibility: Audio

In this post, we’ll see what the Website Content Accessibility Guidelines 2.0 (WCAG2) say about audio. Accessible audio helps users and search engines find and understand your content.

Before we roll up our sleeves, let’s be clear that this post is about audio-only files – not video with audio. If you manage a site with audio files like a music or podcasts, this post will help you make your content more accessible.

Just like accessible images, I’ve divided guidelines into shoulds and coulds. Shoulds include WCAG2 A and AA Level guidelines (the foundation of most accessibility and anti-discrimination legislation) and any AAA Level guidelines that make sense without being too costly. Coulds include AAA Level guidelines that may be too expensive to be worthwhile, or so strict that they hurt the user experience.

Should you even bother?

We’ve already discussed why website accessibility is worthwhile. But I get it, making audio accessible is a tough sell. To tip the scales, we need to remember that even users with owl-like hearing can benefit from accessible audio:

  • Users who need to translate your audio into a different language
  • Users with slow connections that can’t stream audio
  • Users with cognitive disabilities that can’t easily process audio information
  • Users in loud environments that couldn’t hear audio
  • Users in quiet environments who don’t want to disturb others

And if helping your users isn’t enough (you obviously work in the telemarketing arm of a coal-powered mink slaughterhouse), don’t forget about search engine optimization. For now, search engines can only index text so your audio content is nearly invisible. Making your audio files more accessible to users also makes them visible to the kind robots that help folks find you online.

If you want accessible audio, you should:

  • Include a descriptive alt attribute in your audio tags. If the audio is for ambiance, that’s kinda weird, so at least use a null value (alt = “ “) so screen readers can skip it.
  • Link to HTML transcripts. As text, users can translate, read, and share your audio content in more ways. Unless for legal use, transcripts don’t have to exactly match the audio. They should contain helpful descriptions such as telling the user about laughter, explosions, applause, etc.
  • If your audio explains something or includes instructions, use several indicators, such as location, colour, shape, size, labels, etc. Saying ‘click the button to the right’ isn’t as helpful as ‘click the blue ‘Submit’ button in the bottom right corner’.
  • Don’t automatically play audio. If you must, make sure you have accessible controls to to stop, pause, and change volume.
  • Consistently use icons (say, for transcript links), labels, text alternatives, and naming conventions in and around your audio files.

To go the extra mile, you could:

  • Include links to captions or scripts to live audio. Depending on your publishing process, this could be difficult and costly. This is a AAA Level requirement so you probably don’t have to worry about it.
  • Make sure background noise is at least 20 decibels quieter than speech volume. I consider this a should for any audio you publish moving forward, and a could for previously published audio which is a pain to fix.

A few more thoughts on transcripts:

The WCAG2 aren’t perfect, but they’re still a good starting place for more accessible digital experiences. Here are a few extra thoughts:

  • HTML transcripts. Since users visit your website with a internet browser, the safest and most flexible transcript format is HTML – not PDFs or Word documents. Most transcripts use paragraphs or unordered list items for each change in scene, subject, or person speaking. To improve readability, use headings to break up content, and a consistent format for time stamps (like square brackets), and speaker names (like bold font). Simply Accessible has a good example and here’s a helpful list of transcript best practices.
  • So, how do you get your audio transcribed? You could do it (boring), you could use audio recognition software (too many mistakes), or you could farm out the work to folks at Fiverr (look at their reviews first). If you want to pay more, there are plenty of transcription services too.
  • Links to time stamps. One of the best examples is Shop Talk Show. Using Dave Rupert’s plugin called TimeJump, they have clickable timestamps that jump you to the time of interest.

If you need to comply with WCAG2, you should still take time to read through its extensive documentation. If you’re simply hoping to make your website’s images more accessible, this post should get you going in the right direction.


An octopus that gradually becomes pixelated.
Posted on June 29, 2014 by

Website Accessibility: Images

Using the Website Content Accessibility Guidelines 2.0, let’s look at how we make images more accessible to users with vision, hearing, motor and cognitive disabilities.

Put on a pot of coffee before you read the WCAG2. You’ll need all of it. The guidelines are full of useful information but you must decipher its cryptic code that ensures only the most courageous web designers can wield its powers. Of the 61 guidelines, roughly a dozen are relevant to images. Oh, and the definition of image includes pictures, illustrations, graphics, icons, infographics, and charts.

Continue reading…

Image of a sign guiding users away from a large wave.
Posted on May 10, 2014 by

Why Bother with Website Accessibility Guidelines?

In the first of a series of posts on accessibility, we’ll discuss why the Website Content Accessibility Guidelines 2.0 can make our efforts easier to fund, prioritize, and implement.

Making websites accessible to users with vision, hearing, motor, and cognitive disabilities is a noble and financially prudent cause. If we’re serious about serving as many users as we can, let’s go beyond ad hoc improvements and find a more thoughtful approach to accessibility.

This is where website accessibility guidelines come in. They provide a structure to our accessibility efforts – helping us identify, prioritize, and solution issues that could trip up our users.

Before we dive into the World Wide Web Consortium’s Web Content Accessibility Guidelines 2.0 (affectionately shortened to Wuh-Cog-Too – the sound UX designers make when they sneeze), let’s review why we should even bother.

Continue reading…

Improving contest usability means removing barriers
Posted on March 12, 2014 by

Mini Case Study: Contest Usability

When it comes to contest usability, efforts should focus on removing barriers. Here’s what we did with

Just the other week, we launched a new contest at Until April 15, users can win prize packs of energy-efficient goodies courtesy of The Home Depot. Each pack includes a shiny Nest Learning Thermostat

To enter to win, users first learn how small conservation efforts at home can add up to big bill savings. Each conservation effort is an interactive illustration like hanging laundry (instead of using a dryer) or replacing incandescent lightbulbs with LEDs. It’s a win-win really – users learn how to save money and get a chance to win a prize pack.

From a contest usability standpoint, we focused on removing entry barriers without watering down the engaging experience. Though we didn’t uncover any new usability breakthroughs, it’s still helpful to see usability in the wild. With that in mind, here’s three ways we significantly improved contest entry rates:

Continue reading…

Older Posts