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 July 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. In addition to explaining the WCAG Success Criteria and how to address them, this guide also describes how the AudioEye Managed solution may address each issue.

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 AudioEye Managed and requires manual management and/or collaboration with AudioEye.

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 HubSpot or AudioEye Helps

Neither HubSpot or AudioEye 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.

AudioEye recommends 3Play Media for all video transcription, captioning, live captioning, audio description and audio transcript needs. Mention AudioEye at checkout or order 3Play Media services from this link to receive a 10% discount.

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

Checklist Download

Questions?

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

Recent Morey Creative Studios Blog Articles