Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio

Ensure that <audio> and <video> elements do not automatically play audio for more than three seconds without providing users with accessible controls to stop, pause, mute, or adjust the volume.

About This Rule

This guideline ensures that audio does not play automatically without user control, enhancing accessibility for individuals who rely on assistive technologies. Adhering to this practice aligns with the following standards:

• WCAG 2.1 (A): 1.4.2 Audio Control
• WCAG 2.0 (A): 1.4.2 Audio Control
• WCAG 2.2 (A): 1.4.2 Audio Control
• Trusted Tester: 2.A
• EN 301 549

Why It Matters

Automatically playing audio can interfere with screen readers, making it difficult for users with visual impairments to navigate and understand content. Providing user controls for audio playback enhances accessibility and ensures compliance with web accessibility standards.

How to Fix

To address this issue:

• Avoid Autoplay: Do not set audio or video elements to play automatically upon page load.
  

  <!-- Avoid this -->
  <audio src="audio-file.mp3" autoplay></audio>

• Provide User Controls: Ensure that media elements include controls to allow users to manage playback.
  

  <audio src="audio-file.mp3" controls></audio>

• Limit Autoplay Duration: If autoplay is necessary, restrict the audio to play for no more than three seconds.
  

  <audio src="short-audio.mp3" autoplay></audio>

Examples

Incorrect

An audio element that autoplays without user controls:

<audio src="background-music.mp3" autoplay></audio>

Correct

An audio element with user controls and no autoplay:

<audio src="background-music.mp3" controls></audio>

More Information

• G170: Providing a control near the beginning of the Web page that turns off sounds that play automatically
• G171: Playing sounds only on user request