3 Tips for Audio and Video Accessibility

3 Tips for Audio and Video Accessibility

Imagine loading up the latest Marvel movie trailer on YouTube (if that's your jam) or your favorite rom-com on Netflix only to realize, "hey, where's the sound?" What about when you're on a noisy bus or train ride and you need to watch a motivating talk from your favorite designer or developer, "but hey, there's no captions?"

As frustrating as this seems, this exact scenario happens often for people who are D/deaf or hard of hearing and want to enjoy video online.

Hosting video or audio content without closed captions or a transcript is an accessibility barrier

In order to avoid these accessibility barriers, we need to make sure closed captions, video descriptions, or audio transcripts are made available before launching our content for public consumption.

1. Include closed captions

Including closed captions is a must for video content with a spoken word. How you accomplish this task is dependant on your video player or service of choice.

HTML Video

For example, you'd need to take these steps when adding closed captions while using the HTML video element:

  1. Create or generate a WebVTT file (.vtt). This file will house the caption text as well as the timing and duration of each caption output.
  2. ​Add the WebVTT file as a src attribute to a track element within the video. Be sure to also set the label, kind, and srclang attributes for context and clarification.
<video controls>
  <source src="video.mp4" type="video/mp4" />
  <track
    label="English"
    kind="subtitles"
    srclang="en"
    src="captions/en.vtt"
    default
  />
  <track label="Français" kind="subtitles" srclang="fr" src="captions/fr.vtt" />
</video>

Other services

Many other popular video services include the ability to add your own closed captions. Some even feature automatic caption which their algorithms have determined as accurate. However, it's recommended to add your own, especially when unusual or technical terminology is included.

Here's how to include closed captions for video services:

Not including closed captions is like producing a video without an audio track

WCAG success criteria

This comes back to 1.2.2 Captions (Prerecorded) which states:

"Captions are provided for all prerecorded audio content in synchronized media, except when the media is a media alternative for text and is clearly labeled as such."

2. Provide audio descriptions

Audio descriptions are important to share what's happening in-between spoken dialog. Information shared in the description might include:

  • A change in scenery
  • A character performing an action
  • Brief descriptions of silent emotion

When creating video for the web, it's a requirement to provide an audio description. (1.2.5 Audio Description). In order to satisfy this requirement, consider creating a second audio track be available. If your video player doesn't support multiple audio tracks, you may need to provide a separate video altogether. Make sure to link from one video to the other to make sure people are aware of the alternate version.

For example, compare the audio of Apple's Introducing Voice Control on Mac and iOS video with its audio descriptive alternate, Introducing Voice Control on Mac and iOS (with Audio Descriptions). Notice the extra bits of information described in-between people speaking. It may be helpful to think of audio descriptions as alt text for specific scenes of a video. Use enough words to paint the mental image yet not be overbearing with too much data.

WCAG success criteria

This comes back to 1.2.5 Audio Description (Prerecorded) which states:

"Audio description is provided for all prerecorded video content in synchronized media."

3. Include transcripts for video and audio content

Transcripts are a plain-text version of the audio portion of a video or audio content. Providing this as an option has multiple benefits, other than the obvious that people who are D/deaf or hard of hearing can now be included in the conversation:

  • Search engines will be able to crawl the text and add to their indexes making your content searchable
  • People in noisy environments such as a bus terminal or subway can read the content rather than straining to hear it
  • Pieces of content can be more easily shared across social media, narrowing the gap on readers finding and consuming your content

Creating transcripts or having a service generate them for you, such as Rev.com, will have a positive impact in the long run. The question now is, "Where do I place transcripts?"

Placement of transcript content

When including transcripts for audio content, this is typically found near the audio controls, usually directly below. The benefit of including the text in close proximity is to allow the content to be easily discoverable; people won't need to search for a link in order to read the text alternative version.

As an example, check out the Responsive Web Design Podcast. Each landing page features a native audio player as well as the plain text version of the podcast content directly below. With this setup, users have the choice of listening or reading the podcast content.

Another option for transcript placement is if screen real estate is tight or you'd rather temporarily "hide" content until requested by the user, implement the transcript content within a "show/hide" component. Consider using the HTML details disclosure element for this component. With this in place, designers are able to "hide" the transcript content, and end users are able to activate the disclosure control and read the content when desired.

<details>
  <summary>
    <h2>Transcript</h2>
  </summary>
  <p>Transcript content...</p>
</details>

Resources:

Back to blog