WCAG 2.2 Guideline “1.4.2 Audio Control” Level A

Introduction

WCAG 2.2’s “1.4.2 Audio Control” requires that if audio on a webpage plays automatically for more than 3 seconds, users must be provided with one of the following options:

1. A mechanism to pause or stop the audio.
2. A volume control mechanism independent of the overall system volume.

This article provides a beginner-friendly guide to implementing this guideline using HTML, CSS, and JavaScript.

1. Why Audio Control is Necessary

Automatically playing audio can pose the following challenges:

• For visually impaired users: Overlapping audio can interfere with screen readers, making information difficult to comprehend.
• For users with cognitive disabilities: Unexpected audio playback can be disorienting.
• For constrained environments: Audio playback can be disruptive in places like libraries.

Providing audio controls ensures a better experience for all users.

2. Implementation Methods

a. Limiting Automatic Playback to 3 Seconds

If audio plays automatically, ensure it stops within 3 seconds.

HTML Example

<audio autoplay>
  <source src="short-audio.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

• For short sound effects, this method avoids the need for additional controls.

b. Providing Play/Pause Controls

Allow users to control audio playback with a play/pause button.

HTML and JavaScript Example

<audio id="backgroundAudio" autoplay loop>
  <source src="background-audio.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>
<button id="audioControl">Pause</button>

<script>
  const audio = document.getElementById("backgroundAudio");
  const controlButton = document.getElementById("audioControl");

  controlButton.addEventListener("click", () => {
    if (audio.paused) {
      audio.play();
      controlButton.textContent = "Pause";
    } else {
      audio.pause();
      controlButton.textContent = "Play";
    }
  });
</script>

Key Points

• Use the audio.paused property to determine the current playback state.
• Update the button label dynamically to reflect the current action (e.g., “Pause” or “Play”).

c. Adding a Volume Control

Implement a volume control independent of the system volume.

HTML and JavaScript Example

<audio id="backgroundAudio" autoplay loop>
  <source src="background-audio.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>
<label for="volumeControl">Volume:</label>
<input type="range" id="volumeControl" min="0" max="1" step="0.1" value="1">

<script>
  const audio = document.getElementById("backgroundAudio");
  const volumeControl = document.getElementById("volumeControl");

  volumeControl.addEventListener("input", () => {
    audio.volume = volumeControl.value;
  });
</script>

Key Points

• Use <input type="range"> for a smooth volume adjustment.
• The audio.volume property accepts values between 0 (mute) and 1 (maximum volume).

3. Common Mistakes and Solutions

a. No Way to Stop Audio

Mistake

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

• Audio plays automatically without a mechanism to stop it.

Solution Add play/pause controls (refer to the example above).

b. Relying on System Volume

Mistake

<p>If the audio is too loud, adjust your system volume.</p>

• Suggesting users adjust the system volume does not meet the guideline.

Solution Provide independent volume control (refer to the example above).

4. Accessibility Benefits

a. Increases User Options

• Users can manually stop or adjust audio playback to suit their environment and preferences.

b. Reduces Stress from Unexpected Audio

• Prevents unintentional audio playback, improving the browsing experience.

Conclusion

WCAG 2.2’s “1.4.2 Audio Control” ensures that users have control over audio that plays for more than 3 seconds.

Key Implementation Points

1. Limit automatic playback to 3 seconds: For short audio, no additional controls are needed.
2. Add play/pause controls: Allow users to manually control playback.
3. Provide a volume control: Enable independent volume adjustments.

By implementing these practices, you can make audio content accessible and user-friendly for everyone.

We have released UUU Web Accessibility, a tool to simplify web accessibility adoption. If you’re interested in improving accessibility, please check it out!