1.4.2 Audio Control - WCAG 2.2 Demo

Description

If any audio on a web page plays automatically for more than three seconds, the user must be able to pause or stop the audio, or control the audio volume independently of the overall system volume. Audio that starts playing without user initiation can interfere with screen readers, which are also audio-based, making it very difficult for blind and low-vision users to hear and operate the page. It can also cause significant distress to users with cognitive disabilities or sensory sensitivities.

How To Test

Load the page and listen for any audio that begins playing automatically.
If audio auto-plays, check whether it stops on its own within three seconds.
If audio continues beyond three seconds, look for a mechanism to pause, stop, or mute it.
Verify the audio control mechanism appears near the top of the page and is reachable via keyboard before the audio source.
Use a screen reader and attempt to navigate to the audio control while audio is playing, to verify the control is findable and operable.
Test that the control actually stops or mutes the audio when activated.

Testing Tools

Color Contrast Analyser (CCA) — Free desktop app. Download from GitHub, install, use the eyedropper tool to measure contrast ratios on the demo. Read the ratio value and compare to AA (4.5:1) or AAA (7:1) standards.
Lighthouse — Built into Chrome DevTools. Open DevTools (F12), go to Lighthouse tab, select "Accessibility", and run the audit. Review contrast violations and pass criteria in the results.
axe DevTools — Browser extension for Chrome/Firefox. Install from official page, open DevTools, go to axe tab, run scan, and see detailed contrast violations with remediation advice.

Demo 1: Autoplay without controls

The <audio> element below uses autoplay loop but has no controls attribute and no alternative pause mechanism. Screen reader users who land on this page cannot stop the audio.

Podcast: Episode 12

(No audio plays - no file is loaded in this demo. The issue is the absence of controls.)

<audio autoplay loop>
  <source src="episode12.mp3" type="audio/mpeg">
</audio>

Adding controls provides a visible, keyboard-accessible interface to pause, stop, and adjust volume.

Podcast: Episode 12

(No audio file loaded - the browser controls are still rendered and keyboard-accessible.)

<audio autoplay loop controls>
  <source src="episode12.mp3" type="audio/mpeg">
</audio>

Code

Demo 2: Volume control options

The audio plays automatically, but there is no app-level volume control. Users are instructed to adjust volume using their system settings.

Background Music

To adjust volume, use your system settings.

<audio autoplay loop>
  <source src="music.mp3" type="audio/mpeg">
</audio>
<p>To adjust volume, use your system settings.</p>

The audio plays with an independent volume slider control. Users can adjust the audio volume without affecting their system settings.

Background Music

Volume: 50%

<label for="volume-slider">Volume:</label>
<input type="range" id="volume-slider" min="0" max="100" value="50"
       aria-label="Adjust background audio volume...">
<audio autoplay loop>
  <source src="music.mp3" type="audio/mpeg">
</audio>

Code

Demo 3: Three-second rule

Audio plays automatically for 10 seconds with no pause or stop button. Users must wait for the audio to finish playing before proceeding.

Background Music (10 seconds)

(No audio file loaded - demonstrates absence of controls.)

<audio autoplay>
  <source src="long-music.mp3" type="audio/mpeg">
</audio>

Audio plays automatically but stops on its own after 3 seconds. Since the duration is at or below the threshold, no control mechanism is required.

Notification Sound (3 seconds)

(No audio file loaded - demonstrates auto-stop behavior.)

<audio id="notification" autoplay>
  <source src="notification.mp3" type="audio/mpeg">
</audio>
<script>
  setTimeout(() => {
    document.getElementById('notification').pause();
  }, 3000); // Stop after 3 seconds
</script>

Code

Fail Explanation

A failure occurs when audio begins playing automatically on page load and continues for more than three seconds without providing the user a mechanism to stop, pause, or mute it. A common example is a homepage with a background music track or an auto-playing promotional video with audio. When a screen reader user lands on such a page, the auto-playing audio overlaps with the screen reader's speech output, making it nearly impossible to navigate the page and find the stop control.

Pass Explanation

A passing implementation either avoids auto-playing audio entirely, or provides a mechanism at the very beginning of the page (before any auto-playing content) that allows the user to pause, stop, or mute the audio. Placing the control early in the page ensures screen reader users can find and operate it before the auto-playing audio makes navigation impossible. Alternatively, the audio can be limited to three seconds or less.

Notes

Screen reader users are the most severely impacted by auto-playing audio, as audio output from the page can mask the screen reader's own speech. Best practice is simply to not auto-play audio unless the user has clearly initiated it. Where auto-play is used, ensuring the stop or mute control is the first focusable element on the page is a practical approach.

Techniques

WCAG techniques used in this demo: G170, G171