WCAG 2.2 Level A

1.4.2 Audio Control

If audio on a web page plays automatically for more than 3 seconds, provide controls to pause or stop the audio, or control its volume.

Interactive Audio Control Demo

Experience proper audio controls and test different scenarios

Compliant: User-controlled audio with full controls

Accessible Audio Player

Podcast Episode0:00 / 0:00

Volume:

50%

Implementation Examples

Copy-paste code examples for compliant audio controls

<!-- Good Example: Audio with Controls -->
<audio controls preload="none">
  <source src="podcast.mp3" type="audio/mpeg">
  <source src="podcast.ogg" type="audio/ogg">
  <p>Your browser doesn't support HTML5 audio. 
     <a href="podcast.mp3">Download the audio file</a>.</p>
</audio>

<!-- Good Example: Background Audio with User Control -->
<div class="audio-controls">
  <button id="play-btn">Play Background Music</button>
  <button id="pause-btn">Pause</button>
  <button id="stop-btn">Stop</button>
  <input type="range" id="volume" min="0" max="100" value="50">
  <label for="volume">Volume</label>
</div>

<!-- Bad Example: Auto-playing Audio -->
<audio autoplay>
  <source src="background-music.mp3" type="audio/mpeg">
</audio>

Testing Methods

How to test for WCAG 1.4.2 compliance

Manual Test Steps

Load the page and listen for any audio that starts automatically
If audio plays automatically, time how long it plays (must be ≤3 seconds to pass)
Check for visible audio controls (play/pause, stop, volume)
Test that all audio controls work properly
Verify volume control adjusts audio level or mutes completely
Ensure controls are keyboard accessible
Test with screen readers to ensure controls are announced

Important: Test with actual screen reader users when possible, as they are most affected by auto-playing audio.

Key Requirements Summary

Essential points for WCAG 1.4.2 compliance

What TO Do

Provide audio controls (play, pause, stop, volume)
Use preload="none" or preload="metadata" for large audio files
Make controls keyboard accessible
Provide proper ARIA labels for controls
Test with screen readers

What NOT to Do

Use autoplay for audio longer than 3 seconds
Provide audio without user controls
Auto-play background music without controls
Create controls that are not keyboard accessible
Hide or disable native browser controls

Remember: Audio control is crucial for users with cognitive disabilities, hearing impairments, and those using screen readers.

Auto-playing audio can interfere with assistive technologies and cause disorientation.

<audio controls preload="none"> <source src="podcast.mp3" type="audio/mpeg"> <source src="podcast.ogg" type="audio/ogg"> <p>Your browser doesn't support HTML5 audio. <a href="podcast.mp3">Download the audio file</a>.</p> </audio>  <div class="audio-controls"> <button id="play-btn">Play Background Music</button> <button id="pause-btn">Pause</button> <button id="stop-btn">Stop</button> <input type="range" id="volume" min="0" max="100" value="50"> <label for="volume">Volume</label> </div>  <audio autoplay> <source src="background-music.mp3" type="audio/mpeg"> </audio>