Understanding WCAG SC 1.4.2 Audio Control
Version and Level: 2.0/2.1/2.2 (Level A)

WCAG SC 1.4.2 requires that if any audio on a web page plays automatically for more than 3 seconds, there must be a mechanism to pause or stop the audio, or a mechanism( such as button ) to control the audio volume independently from the overall system volume level. This ensures that users can manage audio playback without interfering with their use of the page.

Benefits:

  1. Improved Accessibility for Screen Reader Users: Ensures that automatic audio does not interfere with screen readers or other assistive technologies that rely on system volume.
  2. Enhanced User Experience: Allows all users to control audio playback, preventing distractions and potential discomfort from unexpected sounds.

Main Objective:

To ensure that users can control audio playback on a web page to avoid interference with other content or assistive technologies.

Best Practices:

  • Avoid playing audio automatically: Avoid playing audio automatically if possible.

  • Limit automatically playing audio to 3 seconds: Ensure that automatically playing audio is less than 3 seconds in duration.

  • Provide clear audio controls: Provide clear controls to pause, stop, or adjust the volume of audio that plays for more than 3 seconds.

  • Shift focus to audio controls on page load: Ensure that focus shifts to the pause/stop or volume control as soon as the page opens if audio plays automatically. This enables visually impaired users to turn off the audio before it overrides their screen readers.

Examples & Explanation:

Example: A news website includes an automatically playing audio advertisement at the top of the homepage.

What Should Be Avoided

HTML/CSS

              <audio autoplay>
                <source src="ad.mp3" type="audio/mpeg">
                Your browser does not support the audio element.
              </audio>

Explanation:Without controls to pause or stop the audio, users cannot manage the playback, which can interfere with their browsing experience and assistive technologies. Moreover, the audio starts playing instantly, significantly interrupting the screen reader and causing confusion for users trying to perceive the purpose of the pause/play button.

What Should Be Done

HTML/CSS

              <audio controls autoplay>
                <source src="ad.mp3" type="audio/mpeg">
                Your browser does not support the audio element.
              </audio>

Explanation:By including accessible controls with the “control” HTML attribute, users can pause or stop the audio advertisement, preventing it from interfering with their browsing experience. In this scenario, the audio starts playing three seconds after the page loads, allowing screen reader users a time to interpret the purpose of the pause/play button. This delay ensures that users have the opportunity to perceive the functionality of the button and pause the audio if needed without interruption.

Next Up

Expand your understanding with SC 1.4.3 - Contrast Minimum. Learn to ensure sufficient contrast for all users.

Go to SC 1.4.3