Making Your HubSpot Website WCAG 2.1 Compliant

1.4.2 Audio Control

MCS Accessibility Team

MCS Accessibility Team
Last Updated November 09, 2019

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.4.2 Audio Control

  • 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: Distinguishable
Make it easier for users to see and hear content including separating foreground from background.

If any audio on a Web page plays automatically for more than 3 seconds, either a mechanism is available to pause or stop the audio, or a mechanism is available to control audio volume independently from the overall system volume level.

Note 1: Since any content that does not meet this success criterion can interfere with a user's ability to use the whole page, all content on the Web page (whether or not it is used to meet other success criteria) must meet this success criterion. See Conformance Requirement 5: Non-Interference.

View Official WCAG 2.1 Compliance Techniques

  • This criteria is completely resolved with accessiBe or HubSpot.

Understanding WCAG Success Criteria 1.4.2 Audio Control

We've all landed on a website and had it unexpectedly start playing audio right away. This is an annoying user experience for everyone, but for users who are visually impaired and rely on text-to-audio screen readers, this makes your website frustrating, or even impossible to use.

Typically, the audio of your page and the audio of the screen reader will be the same volume, so it's very important that it stops, or the user can pause or stop audio quickly, for them to stay on page.

Audio control also benefits users who may have a difficult time processing visual information such as text at the same time they're hearing audio.

To be compliant, you have a few acceptable options:

  1. Stop the audio on your site automatically after three seconds of play.
  2. If the clip lasts more than three seconds, provide an easy, prominent control to your user to pause/stop audio.
  3. Disable sounds when an assistive technology is detected.
  4. Only play sounds when the user takes an action, such as clicking a play button.

 

How accessiBe Helps

accessiBe is WCAG 2.1 AA compliant* in that it provides users with option #2: the ability to easily mute all sounds from within the widget.

Screenshot of accessiBe module showing Mute Sounds

 

Unfortunately, accessiBe cannot automatically mute sounds playing on your website. This puts responsibility on the user to mute.

 

Solutions

*While accessiBe does provide an acceptable and fully compliant solution, it's not the most ideal.

We recommend option #4: simply not playing sounds automatically unless the user takes an action, such as clicking a play button. This has a number of benefits outside of ADA compliance, including:

  • Not Annoying Your Users - It's jarring to load a site that begins with blaring audio you weren't expecting. Users perceive it as aggressive, obnoxious, and intrusive.
  • Reducing Bounce Rate - Autoplayed sound triggers a knee-jerk reaction to turn it off, which often means your audience closing the tab right away and leaving the site completely.
  • Reducing Page Load Times - Pages with autoplay media content can often experience slower performance, especially on mobile devices.
  • Reducing Bandwidth - Autoplay will consume additional bandwidth, and if you host media using a service like Amazon S3 that has a bandwidth quota, you may end up paying more money, unnecessarily.

 

Autoplay is considered so bad for users that some web browsers are making the decision to block it altogether. For example, as part of its 2017 High Sierra update, Apple added controls to its Safari browser that block all auto-playing videos with sound, by default.

It's likely other browsers will follow suit, but until then, it's worth ensuring your sound only plays if the user selects it.

For more information, please visit the official W3C article: Understanding 1.4.2 Audio Control


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