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.