Making Your HubSpot Website WCAG 2.1 Compliant

1.2.3 Audio Description or Media Alternative (Prerecorded)

MCS Accessibility Team

MCS Accessibility Team
Last Updated March 23, 2020

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. All suggestions in this guide are in conjunction with the accessiBe solution and require an active license. For more information on the accessiBe platform and pricing, you can learn more here.

LEVELA
Success Criteria

1.2.3 Audio Description or Media Alternative (Prerecorded)

  • Resolved
  • Partially Resolved
  • Manually Managed
  • N/A - Level AAA
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

  • This criteria is not resolved with accessiBe or HubSpot and requires manual management.

Understanding 1.2.3 Audio Description or Media Alternative (Prerecorded)

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

 

This criteria applies specifically to websites that include video and audio. If your site doesn't include media, you'll resolve this criteria and be compliant by default. No manual intervention will be required, and you can stop reading right here!

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. So, 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.

 

How accessiBe or HubSpot Helps

Neither accessiBe or HubSpot have any control over this criteria. Audio captions are managed where the video or audio is hosted. This criteria requires that the audio account for more than just the natural dialogue, and also include descriptions of important non-audio elements. This must be controlled on the content creation side.

 

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 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)


Download the WCAG 2.1 Compliance Checklist

What to expect if you download this checklist

Video: What to Expect If You Download this Checklist

Checklist Download

Questions?

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

Recent Morey Creative Studios Blog Articles