WCAG 1.4.2: How to Fix Auto-playing Audio Issues

Last updated: 2026-03-22

Level A Perceivable WCAG 1.4.2

What This Criterion Requires

WCAG 1.4.2 requires that 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. Auto-playing audio creates serious barriers for screen reader users because it interferes with their ability to hear the screen reader output. Screen readers use synthesized speech to convey page content, and when background audio competes with that speech, users may be completely unable to navigate or understand the page. The mechanism to control the audio must be available at the beginning of the page and must be easy to find and operate. This criterion applies to any audio that starts without user interaction, including background music, video with audio that auto-plays, audio advertisements, and ambient sound effects. The simplest way to comply is to never auto-play audio, requiring users to explicitly start playback. If auto-play is necessary for the user experience, providing a clearly labeled pause or mute control at the top of the page is essential.

Why It Matters

Auto-playing audio is one of the most disruptive accessibility barriers for screen reader users. Screen readers produce audio output, and when a web page simultaneously plays its own audio, the screen reader output becomes difficult or impossible to hear. This effectively locks screen reader users out of the entire page because they cannot hear their screen reader well enough to navigate to the audio controls and turn off the competing sound. Users who are hard of hearing and use amplification may experience painful volume levels from unexpected audio. Users with cognitive disabilities, attention disorders, or sensory processing difficulties may find auto-playing audio extremely distracting and disorienting. Even users without disabilities find auto-playing audio annoying and intrusive, especially in quiet environments like offices, libraries, or late at night. This is one of the few accessibility requirements where the best solution is prevention: simply do not auto-play audio.

Common Failures and How to Fix Them

Background music auto-plays on page load with no controls

A website plays background music or ambient audio as soon as the page loads, and there is no visible control to pause, stop, or mute the audio. Screen reader users cannot hear their assistive technology over the music.

Inaccessible 
<audio autoplay loop>
  <source src="/audio/background-music.mp3" type="audio/mpeg">
</audio>
Accessible 
<!-- Option 1: Do not autoplay (preferred) -->
<audio controls>
  <source src="/audio/background-music.mp3" type="audio/mpeg">
</audio>

<!-- Option 2: If autoplay is required, provide immediate controls -->
<div class="audio-control" style="position: fixed; top: 0; left: 0; z-index: 9999; padding: 10px;">
  <button id="mute-btn" onclick="document.getElementById('bg-audio').muted = !document.getElementById('bg-audio').muted">
    Pause background music
  </button>
</div>
<audio id="bg-audio" autoplay loop>
  <source src="/audio/background-music.mp3" type="audio/mpeg">
</audio>

Video with audio auto-plays in hero section

A hero banner contains a video that auto-plays with sound. There is no way to mute or pause the video without scrolling down to find the video controls, which screen reader users cannot easily do while the audio is playing.

Inaccessible 
<section class="hero">
  <video autoplay loop>
    <source src="/videos/hero-promo.mp4" type="video/mp4">
  </video>
</section>
Accessible 
<section class="hero">
  <video autoplay loop muted id="hero-video">
    <source src="/videos/hero-promo.mp4" type="video/mp4">
  </video>
  <button onclick="toggleHeroAudio()" aria-label="Unmute video">
    Unmute
  </button>
</section>
<script>
  function toggleHeroAudio() {
    const video = document.getElementById('hero-video');
    video.muted = !video.muted;
    this.textContent = video.muted ? 'Unmute' : 'Mute';
    this.setAttribute('aria-label', video.muted ? 'Unmute video' : 'Mute video');
  }
</script>

How to Test

  1. Load the page and listen for any audio that plays automatically without user interaction.
  2. If auto-playing audio is present and lasts more than 3 seconds, check for a clearly visible and accessible control at the top of the page to pause, stop, or mute the audio.
  3. Test the audio control with a keyboard to ensure it is reachable without needing to navigate past other content first.
  4. Verify that the audio control operates independently of the system volume, allowing users to silence the page audio without affecting their screen reader volume.

CMS-Specific Guidance

This criterion commonly causes issues on these platforms:

Further Reading

Related WCAG Criteria