1.4.2 Audio Control
Level: A | Principle: Perceivable | Since: WCAG 2.0 | Automation: Manual
What This Means
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 to control the volume independently from the system volume. This control must be available at the very beginning of the page, before any other content.
Auto-playing audio interferes with screen readers, which output speech or braille. If background audio competes with the screen reader's voice, the user cannot hear either. This is not just annoying — it makes the page completely unusable for screen reader users.
Who This Affects
- Screen reader users — auto-playing audio drowns out the screen reader voice, making navigation impossible
- Users with cognitive disabilities — unexpected audio is disorienting and makes it hard to concentrate
- Users with anxiety disorders — sudden audio can be startling and distressing
- All users — auto-playing audio in a quiet office or public space is disruptive
Common Pitfalls
1. Background music with no stop control
<!-- Bad: auto-playing audio with no pause mechanism -->
<audio autoplay loop src="background-music.mp3"></audio>
2. Video hero banner with auto-playing audio
<!-- Bad: video auto-plays with sound and no easy way to stop it -->
<video autoplay src="hero-promo.mp4"></video>
<!-- Audio starts immediately, control is buried below the fold -->
3. Audio control exists but is not keyboard accessible
<!-- Bad: custom mute button cannot be reached by keyboard -->
<div onclick="toggleMute()" style="cursor: pointer;">
<img src="speaker-icon.png" alt="">
</div>
4. Audio control appears after other page content
<!-- Bad: mute button is at the bottom of the page -->
<main>
<h1>Welcome</h1>
<audio autoplay src="welcome-message.mp3"></audio>
<!-- 500 lines of content -->
<button onclick="toggleMute()">Mute</button>
</main>
How to Fix
Do not auto-play audio at all (best approach)
<!-- Good: audio requires user interaction to play -->
<audio controls src="background-music.mp3"></audio>
If auto-play is required, start muted
<!-- Good: video auto-plays but starts muted -->
<video autoplay muted loop src="hero-promo.mp4">
<source src="hero-promo.mp4" type="video/mp4">
</video>
<button onclick="this.previousElementSibling.muted = !this.previousElementSibling.muted">
Toggle Sound
</button>
Provide a prominent stop/mute control at the top of the page
<!-- Good: mute button appears before any other content -->
<body>
<button id="mute-btn" aria-label="Mute background audio" autofocus>
Mute Audio
</button>
<audio id="bg-audio" autoplay src="ambient.mp3"></audio>
<script>
document.getElementById('mute-btn').addEventListener('click', function() {
const audio = document.getElementById('bg-audio');
audio.paused ? audio.play() : audio.pause();
this.textContent = audio.paused ? 'Play Audio' : 'Mute Audio';
});
</script>
<main>
<!-- page content -->
</main>
</body>
Provide independent volume control
<!-- Good: slider controls audio volume independently from system volume -->
<label for="volume">Background music volume</label>
<input type="range" id="volume" min="0" max="1" step="0.1" value="0.5"
oninput="document.getElementById('bg-audio').volume = this.value">
<audio id="bg-audio" autoplay src="ambient.mp3"></audio>
How to Test
- Load the page and listen for any audio that plays automatically.
- If audio plays, check whether it stops within 3 seconds or whether a visible pause/stop/mute control appears near the top of the page.
- Verify the audio control is keyboard accessible by pressing Tab to reach it and Enter/Space to activate it.
- Open a screen reader (VoiceOver: Cmd+F5, NVDA: Ctrl+Alt+N) and load the page. Confirm the screen reader voice is not drowned out by auto-playing audio.
- Pass: No audio auto-plays for more than 3 seconds, or a keyboard-accessible stop/mute control is immediately available at the top of the page.
- Fail: Audio plays automatically for more than 3 seconds with no accessible stop/mute control, or the control is not reachable by keyboard.
axe-core Rules
No automated axe-core rules. This criterion requires manual testing.