Making Your HubSpot Website WCAG 2.1 Compliant

1.2.2 Captions (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.2 Captions (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.

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.

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.2 Captions (Prerecorded)

"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."

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!

Captions must be added to all audio files and media files with sound so that they are accessible to people who are deaf or hearing impaired. This includes videos, podcasts, audio clips, and more. To make the caption the best it can be for deaf and hard of hearing users, ensure the following:

  • Published at the Same Time as the Content: "Synchronized" means the caption must be delivered at the same pace as the audio delivery. It is not acceptable to add the caption file at a later date or include a transcript.
  • Accuracy: The caption should present the same exact content, at the same time as the audio track. Plan, script, and create these files with care.
  • Presentation: Give the user the ability to toggle captions on/off. Present captions using enough contrast to be easily readable. Captions should not cover important images or visuals.
  • Non-Speech Data: You should identify who is speaking and include notes about background sounds, sound effects, etc.
  • Language: Style guides and best practices for captions may vary across different languages.

How HubSpot or AudioEye Helps

There is nothing HubSpot or AudioEye currently do to resolve this criteria. Audio captions should be managed where the video or audio is hosted. Unfortunately, video hosted directly on the HubSpot file manager does not have caption functionality but the third-party service that powers HubSpot Videos—Vidyard—does, provided you have a paid plan.

Recommended Solutions

Recommended Solutions for Video

Hosting your videos on Vidyard.

  • Vidyard includes its own caption authoring tool that enables you to easily create the timestamped file necessary
  • Vidyard provides an automated transcription service to all paid customers that creates English-language files. Once created, it is not published, giving you the time to review the file for language errors and check that the timing on the captions is accurate


Hosting your videos on YouTube. 

  • Includes powerful, intuitive captioning tools within its video editor
  • One of the most well-known and easy-to-use video platforms
  • Free to use

There are other third-party solutions that provide accessible media players and the ability to add or generate captions, including Wistia and Vimeo. You'll want to consider performance and pricing, but no matter which you choose, you'll always want to rely on a manual review and edit to ensure WCAG compliance.

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.

Recommended Solution for Podcasts & Audio Clips

With audio-only content, it's a little trickier to be compliant and still provide the full experience and value for your user. You'll want to consider your unique use cases for audio clips, as well as time and financial resources.

Make a "video:" You may choose to turn your audio clip into a "video" with a static background, which allows you to leverage built-in captioning tools. While this is easier to produce, it's simply not the most ideal experience for your users.

Use an accessible player: There are some fully compliant web players out there, such as the free, open-source solution Able Player (example below) that can be endlessly styled to match your website's look and feel. If you click the Show Transcript icon, a flyout modal will provide text captions and highlight each line in time with the audio.

What is the difference between a landing page and a site page?

Inbound Question of the Day What is the difference between a landing page and a site page?


However, this solution may not be for everyone. Here, you lose detailed analytics and social media integrations that other solutions offer. You will have to create a SRT or VVT file on your own using a text editor or more complex tools, but for many folks, this may be a confusing and time-consuming process.

A paid player such as Omny Studio, for example, offers a sleek, attractive interface with synchronized captioning, analytics, and monetization opportunities built in. Halfway down this page you can see a player in action.

Note

Resolving this success criteria also resolves the the audio-only aspect of 1.2.1. An alternative for time-based media is provided that presents equivalent information for prerecorded audio-only content. Captioning video-only content in this same way resolves the other aspect of 1.2.1.

Exceptions

You do not need to include captions for media that has its own built-in text. For example, if you have a video walkthrough on how to assemble a table, and the video zooms in on pages from the instruction manual on the different steps, additional captioning is not necessary.

Captions are also not required if the video is itself an alternative presentation of text. For example, let's say you have a news article. The text of the article is on the page, but you want to also present it as an audio clip embed at the top. The text content is exactly the same. In this instance, you would not need to include any captioning alongside the audio, since the same information is immediately below it. Just be sure to clearly label that the audio is a media alternative to the text article below.

For more information, please visit the official W3C article: Understanding 1.2.2 Captions (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