Skip to main content
Perceivable WCAG 1.4.2

1.4.2 Audio Control

If audio plays automatically for more than 3 seconds, a mechanism is available to pause, stop, or control the volume independently from the system volume.

Level A Serious WCAG 2.0 (new) WCAG 2.1 WCAG 2.2
no-autoplay-audio

What This Rule Means

WCAG 1.4.2 addresses auto-playing audio content. When a web page loads and immediately starts playing sound for more than three seconds, it can severely interfere with screen reader users who rely on audio output to navigate. The criterion requires that either the audio stops within three seconds, or the user is provided with a clearly accessible mechanism at the top of the page to pause, stop, or control the volume independently of the system volume level.

This applies to any audio that starts without user interaction — background music, video autoplay with sound, audio advertisements, or ambient sounds. Even if the content creator considers the audio desirable, it must be controllable by the user.

Why It Matters

Screen reader users depend on synthesized speech to interact with web content. When a page autoplays audio, it directly competes with the screen reader output, making it extremely difficult or impossible for the user to hear navigation instructions, read content, or operate controls. The user may not even be able to find the pause button if the audio is drowning out their screen reader.

Beyond screen reader users, auto-playing audio is disruptive for people in shared spaces, those with cognitive disabilities who can be overwhelmed by unexpected sounds, and individuals with auditory processing disorders who struggle when multiple audio streams play simultaneously.

Related axe-core Rules

  • no-autoplay-audio — Detects <audio> and <video> elements with autoplay attributes that play for longer than 3 seconds without controls or mute mechanisms.

How to Test

  1. Load the page and listen: Does any audio start playing automatically?
  2. If audio plays, check whether it stops within 3 seconds.
  3. If it continues, verify there is a visible pause/stop/mute control near the top of the page.
  4. Confirm the audio control is keyboard-accessible and reachable before the auto-playing content in tab order.
  5. Test with a screen reader to ensure the control can be found and activated while audio is playing.

How to Fix

The best approach is to never autoplay audio. Require user interaction to start media:

<video controls>
  <source src="promo.mp4" type="video/mp4" />
  <track kind="captions" src="captions.vtt" srclang="en" label="English" />
</video>

<!-- Do NOT use autoplay with sound -->
<!-- Bad: <video autoplay> -->

If autoplay is a hard business requirement, ensure the audio is muted by default and the user can enable sound:

<video autoplay muted controls>
  <source src="hero-background.mp4" type="video/mp4" />
</video>

<button id="unmute-btn" aria-label="Unmute video">
  Enable Sound
</button>

For background audio that must play, provide an immediately accessible stop control:

<!-- Place this as the first interactive element on the page -->
<button id="audio-stop" class="audio-control">
  Stop Background Audio
</button>

<script>
  const audio = document.getElementById('bg-audio');
  document.getElementById('audio-stop').addEventListener('click', () => {
    audio.pause();
    audio.currentTime = 0;
  });
</script>

Common Mistakes

  • Background music or ambient sounds that autoplay on page load without a mute button.
  • Video hero banners that autoplay with sound enabled.
  • Audio controls exist but are placed far down the page, making them unreachable for screen reader users before the audio starts interfering.
  • Volume controls that only adjust relative to system volume rather than independently muting the page audio.
  • Third-party ad embeds that autoplay audio without providing a control mechanism.

Resources