Making Your HubSpot Website WCAG 2.1 Compliant

1.4.2 Audio Control

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.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 partially resolved and/or detected with AudioEye Managed but may require some manual intervention and/or collaboration with AudioEye.

Understanding 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:

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

How AudioEye Helps

AudioEye is capable of making functional adjustments to a website, but these steps are taken only as a last resort and if a digital access barrier is fully limiting access for end-users. As these actions would impact the intentional functionality of the site, they would also require explicit written approvals to change. When 1.4.2 violations are detected, AudioEye will alert and collaborate with accessibility stakeholders to incorporate the necessary best practices in connection with the design, development, and content creation process.

Recommended Solutions

While AudioEye is quick to alert Managed customers when 1.4.2 violations are detected and can take action with customer approval, we still recommend taking steps to avoid this usability issue, which is likely to be considered a nuisance by most site visitors.

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