Autoplay audio longer than 3s needs accessible controls

Autoplay audio must not exceed 3 seconds without an accessible stop or mute control

If any page audio begins on its own and lasts more than three seconds, users must be able to pause, stop, or mute it. This applies to audio elements, videos with soundtracks, and embedded media. The rule protects screen reader users and anyone who needs to manage sound.

Why It Matters

Competing sound makes screen reader speech hard or impossible to hear. If the user cannot silence the page quickly, they cannot navigate or understand content.

Background audio can disrupt concentration, impact people with cognitive disabilities, and create problems in shared or quiet environments. Keyboard-only users also need an obvious, reachable control.

Common Causes

• audio or video elements using autoplay with audible sound
• hero or background videos that include music or narration
• third‑party embeds (ads, players) set to autoplay
• custom media players without a visible, labeled mute/pause control
• JavaScript that starts audio on load or on modal open
• controls that are hidden, offscreen, or not keyboard operable

How to Fix

1. Prefer user-initiated playback (best practice)
   • Remove autoplay from audio and video with sound.
   • Provide native controls or a clearly labeled Play button.
2. If visuals must autoplay, start muted
   • For video: use autoplay muted so no audio is heard by default.
   • Offer an Unmute or Play with sound control the user can choose.
3. If autoplay audio is essential, limit it to ≤3 seconds
   • Stop or pause the sound within three seconds automatically.
   • Do not rely on the system volume; provide a page control.
4. Provide an accessible, persistent control when audio can exceed 3 seconds
   • Include a visible Pause/Stop or Mute button near the media or at the top of the page.
   • Ensure keyboard access (Tab focus, Enter/Space activation) and clear focus styles.
   • Use clear labels and announce state (e.g., aria-pressed on toggle buttons).
5. Configure third‑party players
   • Disable autoplay or start muted via provider settings.
   • Ensure the player’s pause/mute controls are visible and reachable by keyboard.
6. Don’t hide or time out the control
   • Keep the control available as long as audio may play.
   • Avoid hover-only or motion-triggered visibility.

<!-- User-initiated audio (preferred) -->
<button id="playTour" aria-controls="tourAudio">Play tour audio</button>
<audio id="tourAudio" src="/media/tour.mp3" preload="none"></audio>
<script>
  const btn = document.getElementById('playTour');
  const audio = document.getElementById('tourAudio');
  btn.addEventListener('click', () => {
    audio.play();
    btn.textContent = 'Pause tour audio';
    btn.setAttribute('aria-pressed', 'true');
  });
  btn.addEventListener('keydown', (e) => {
    if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); btn.click(); }
  });
</script>

<!-- Autoplaying hero video muted by default -->
<video src="/media/hero.mp4" autoplay muted playsinline loop></video>
<button id="unmute" aria-pressed="false">Unmute video</button>
<script>
  const v = document.querySelector('video');
  const unmute = document.getElementById('unmute');
  unmute.addEventListener('click', () => {
    v.muted = !v.muted;
    unmute.textContent = v.muted ? 'Unmute video' : 'Mute video';
    unmute.setAttribute('aria-pressed', String(!v.muted));
  });
</script>

<!-- If autoplay audio is unavoidable, stop it within 3s -->
<audio id="notif" src="/media/intro-chime.mp3" autoplay></audio>
<script>
  const notif = document.getElementById('notif');
  setTimeout(() => { try { notif.pause(); notif.currentTime = 0; } catch(e) {} }, 3000);
</script>

How to Test

Keyboard

• Load the page with speakers on. Note any audio that starts without interaction.
• Tab to the media control. Confirm you can pause/stop/mute with Enter/Space.
• Ensure focus is visible and there is no keyboard trap.

Screen reader

• With NVDA/JAWS/VoiceOver, open the page. You should hear the screen reader clearly, not masked by page audio.
• Navigate to the control. It must be announced with a clear role/label and state (e.g., “Mute button, pressed”).

Mobile/touch

• Test on iOS and Android with device sound on. Some platforms block autoplay with sound, but do not rely on this.
• Verify the control is visible, finger-accessible (≈44px target), and works with TalkBack/VoiceOver.

Timing

• If audio autoplays, measure: it must stop within 3 seconds unless a control is present to pause/stop/mute.

Good Example

A product page uses a looping hero video set to autoplay muted. A visible button labeled “Unmute video” toggles sound. An audio tour does not autoplay; users press “Play tour audio” to start it. Both controls work with keyboard and are announced correctly by screen readers.

<section>
  <h2>Explore the collection</h2>
  <video src="/media/collection.mp4" autoplay muted playsinline loop></video>
  <button id="soundToggle" aria-pressed="false">Unmute video</button>
</section>
<section>
  <h2>Audio tour</h2>
  <button id="playTour2" aria-controls="tour2">Play tour audio</button>
  <audio id="tour2" src="/media/tour.mp3" preload="none" controls></audio>
</section>
<script>
  const vid = document.querySelector('video');
  const st = document.getElementById('soundToggle');
  st.addEventListener('click', () => {
    vid.muted = !vid.muted;
    st.textContent = vid.muted ? 'Unmute video' : 'Mute video';
    st.setAttribute('aria-pressed', String(!vid.muted));
  });
</script>

Bad Example

A landing page autoplays a soundtrack on load and loops indefinitely. There are no visible controls, and pressing Tab never reaches a pause or mute option.

<audio src="/media/ambient.mp3" autoplay loop></audio>
<style>
  /* No controls, hidden audio, users cannot stop the sound */
</style>

Quick Checklist

• No autoplaying audio lasts more than 3 seconds without a user control.
• Prefer user-initiated playback; otherwise autoplay must start muted.
• Provide a visible Pause/Stop or Mute button near the media.
• Control works with keyboard (Tab, Enter/Space) and shows focus.
• Labels and states are announced correctly by screen readers.
• Control remains available while audio can play; not hover-only.
• Third‑party players configured to disable autoplay or show controls.
• Do not rely on system volume; offer page-level mute/stop.