Level A
Perceivable
WCAG 2.0+
Success Criterion 1.4.2: Audio Control
Official W3C Definition
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.
Why This Criterion Matters
Screen reader users rely on audio to navigate and understand web content. If a website plays audio automatically, it can interfere with the screen reader's speech output, making it impossible for blind users to use the site.
Best Practice: Avoid auto-playing audio entirely. If you must include it, provide an easily accessible way to stop it immediately.
Who Benefits
Screen Reader Users
Auto-playing audio drowns out screen reader speech output.
Cognitive Disabilities
Unexpected audio can be distracting and disorienting.
Users in Quiet Environments
Unexpected audio in libraries, offices, or late at night is disruptive.
Everyone
Auto-playing audio is generally considered poor user experience.
How to Meet This Criterion
Technique 1: Don't Auto-Play Audio (Best Practice)
Good Example - User-Initiated Playback
<!-- Good: Audio requires user action to play -->
<video controls>
<source src="video.mp4" type="video/mp4">
</video>
<!-- Good: Audio with visible controls, muted by default -->
<audio controls>
<source src="podcast.mp3" type="audio/mpeg">
</audio>Technique 2: Provide Prominent Stop/Pause Control
Good Example - If Auto-Play is Necessary
<!-- If auto-play is absolutely required, provide immediate control -->
<div class="audio-control" style="position: fixed; top: 10px; right: 10px;">
<button onclick="toggleAudio()"
aria-pressed="false"
aria-label="Pause background music">
<i class="fas fa-pause"></i> Pause Audio
</button>
</div>
<audio id="bgMusic" autoplay>
<source src="background.mp3" type="audio/mpeg">
</audio>
<script>
function toggleAudio() {
const audio = document.getElementById('bgMusic');
const btn = event.target;
if (audio.paused) {
audio.play();
btn.setAttribute('aria-pressed', 'false');
btn.innerHTML = '<i class="fas fa-pause"></i> Pause Audio';
} else {
audio.pause();
btn.setAttribute('aria-pressed', 'true');
btn.innerHTML = '<i class="fas fa-play"></i> Play Audio';
}
}
</script>Technique 3: Start Muted with Volume Control
Good Example - Muted Auto-Play
<!-- Video auto-plays but is muted -->
<video autoplay muted controls>
<source src="hero-video.mp4" type="video/mp4">
</video>
<!-- Volume slider independent of system volume -->
<label for="volumeControl">Video Volume</label>
<input type="range" id="volumeControl"
min="0" max="100" value="0"
aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
Bad Example
<!-- Bad: Auto-playing audio with no controls visible -->
<audio autoplay>
<source src="background-music.mp3" type="audio/mpeg">
</audio>
<!-- Bad: Hidden audio player -->
<audio autoplay style="display: none;">
<source src="ambient.mp3" type="audio/mpeg">
</audio>Common Failures to Avoid
| Failure | Problem | Solution |
|---|---|---|
| Auto-playing audio without controls | Screen reader users can't hear their software | Add visible pause/stop button |
| Hidden audio players | Users cannot find controls to stop audio | Make controls visible and accessible |
| Background video with sound | Interferes with assistive technology | Mute by default, add unmute button |
| Looping audio without end | Continuous interference | Limit duration or provide stop control |
| Audio that restarts on page navigation | Repeated interruption | Remember user preference to stop audio |
Testing Methods
Manual Testing Steps
- Load the page: Does any audio start automatically?
- Check duration: If audio plays, does it last more than 3 seconds?
- Find controls: Is there a visible pause/stop button?
- Test controls: Do the controls work immediately?
- Check accessibility: Can controls be activated by keyboard?
- Screen reader test: Can you hear the screen reader over the audio?
Automated Detection
- Check for
autoplayattribute on audio and video elements - Look for audio that starts via JavaScript on page load
- Verify presence of controls attribute or custom controls
Related Criteria
1.2.2 Captions (Prerecorded)
Audio content needs captions
2.1.1 Keyboard
Audio controls must be keyboard accessible