1.2.3 Audio Description or Media Alternative (Prerecorded)

MCS Accessibility Team

MCS Accessibility Team
Last Updated December 04, 2021

The following directions are part of a full step-by-step guide to making a HubSpot website WCAG 2.1 AA compliant. These recommendations are intended for websites managed on the HubSpot CMS but can be adapted for other content management systems.

Principle: Perceivable
Information and user interface components must be presentable to users in ways they can perceive.
Guideline: Time-based Media
Provide alternatives for time-based media.

An alternative for time-based media or audio description of the prerecorded video content is provided for synchronized media, except when the media is a media alternative for text and is clearly labeled as such.

View Official WCAG 2.1 Compliance Techniques

Understanding 1.2.3 Audio Description or Media Alternative (Prerecorded)

"Full descriptions are provided for all visual information, including visual context, actions and expressions of actors, and any other visual material."

This criterion applies specifically to websites that include video with audio (synchronized media). For any information that is delivered visually, there is a full description, either an audible description or a "screenplay" version of the video where all audio is described.

Imagine you're watching an educational video on how to use the HubSpot CRM. The speaker in the video is walking you through different web pages, talking and showing you screenshots at the same time. For blind and visually impaired users, they may end up missing out on a lot of important content that is visual-only. The purpose behind this success criterion is to ensure that all users can access all information in a synchronized media file, not just the audio content.

There are two ways you can ensure this:

1. Audio Description - Insert audio descriptions during pauses. Within your media file, in between the portions of dialogue, another speaker can describe visual information. This information will include things such as a scene description, the characters or people in the scene, changes to the scene, and so on. You may have to insert pauses/freeze-frames between dialogue. 

  • John Smith, "This is a photo I took in Philadelphia."
    • Describer during pause, "The speaker holds up a photo of the Liberty Bell.
  • John Smith, "I did all the touristy things while I was there."
    • Describer, "The speaker holds up a photo of him eating a cheesesteak sandwich."

2. Media Alternative - Provide a text version. Depending on your use case, it may be challenging to insert additional audio descriptions into the video, or confusing for your listener to follow. So, your second option is to provide a text-based alternative. The end result should be similar to a screenplay or movie script.

In addition to visual information, you'll also include mentions of non-speech audio content information, such as a speaker laughing, or an off-screen noise.

  • The sequence of dialogue in text must match the sequence of dialogue within the audio.
  • If there's a call-to-action within the audio content (i.e. "Click the button on the video to learn more!") your text-based alternative must include that same hyperlink on those same words.

Recommended Solutions

Option 1 - Insert audio descriptions. With this technique, you are limited to the pauses between dialogue to insert visual descriptive information. You may have to edit the original content to insert or extend pauses to adequately describe all required visual material. You will also need to merge in the second audio track. This can be the more challenging of the two options, but if you're seeking AA-level compliance, you will be required to use this option, per WCAG criteria 1.2.5.

With this option, you can deliver a second, user-selectable version of a video that includes audio descriptions. This way, the original version does not compromise the experience for others who do not need the accessible version.

Option 2 - Provide a text alternative. This gives you the opportunity to provide a fuller and clearer picture to your user by providing in-depth descriptions either before, in the middle of, or after audio content. If you need to provide more detailed information about what's on screen, this is likely the better option.

You may either link to the transcript (provided it's on the same domain as the rest of your site), or, as we recommend for better usability, place the entire description on the same page. Either way, the link or the full description must appear directly next to or beneath your video.

For more information, please visit the official W3C article: Understanding 1.2.3 Audio Description or Media Alternative (Prerecorded)


Let us know if we can help you address this specific WCAG Recommendation.