Autoplay video and audio: accessibility rules and fixes

Updated 2026-10-24 · Altlark guides

Autoplaying media is any video or audio that starts on its own when the page loads. Background hero videos, sound on a landing page, auto-advancing product videos. Two groups of people are affected most:

• Screen-reader users: if audio plays, it talks over the screen reader, and the user may not be able to find the pause button because they can't hear their own software.
• People with attention, vestibular or cognitive disabilities: constant motion can make it hard to read the rest of the page, and some motion can cause dizziness or nausea.

Which WCAG criteria apply

1.4.2 Audio Control, Level A: "If any audio on a web page plays automatically for more than 3 seconds, either a mechanism is available to pause or stop the audio, or a mechanism is available to control audio volume independently from the overall system volume level." WCAG notes that this applies to all content on the page, because sound that can't be stopped interferes with using anything else.

2.2.2 Pause, Stop, Hide, Level A: for moving, blinking or scrolling information that starts automatically, lasts more than five seconds, and is presented in parallel with other content, there must be a way to pause, stop or hide it (unless the movement is essential). A looping background video is a typical case. Auto-advancing carousels fall under this too.

Bad vs fixed: hero video

<video src="/hero.mp4" autoplay loop></video>

This plays with sound (if the file has an audio track), loops forever, and has no controls. Most browsers block autoplay with sound anyway, so the video may not even play for many visitors.

<video id="hero" src="/hero.mp4" autoplay muted loop playsinline aria-hidden="true"></video>
<button type="button" id="hero-toggle" aria-pressed="false">Pause background video</button>
<script>
  const v = document.getElementById("hero"), b = document.getElementById("hero-toggle");
  b.addEventListener("click", () => {
    if (v.paused) { v.play(); b.textContent = "Pause background video"; b.setAttribute("aria-pressed", "false"); }
    else { v.pause(); b.textContent = "Play background video"; b.setAttribute("aria-pressed", "true"); }
  });
</script>

What changed: muted, so it can't talk over a screen reader; a visible, keyboard-reachable pause button; and aria-hidden="true" because the video is decorative. If the video carries information, don't hide it: give it controls and captions instead.

Respecting reduced-motion settings

Many people turn on "reduce motion" in their operating system. You can respect that and not autoplay at all for them:

<script>
  if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
    const v = document.getElementById("hero"); v.removeAttribute("autoplay"); v.pause();
  }
</script>

Bad vs fixed: audio

<audio src="/welcome.mp3" autoplay></audio>

<audio src="/welcome.mp3" controls preload="none"></audio>

The simplest fix for audio is not to autoplay it. Let people press play.

Product and explainer videos

<video src="/demo.mp4" autoplay></video>

<video src="/demo.mp4" controls preload="metadata">
  <track kind="captions" src="/demo.en.vtt" srclang="en" label="English">
</video>

Videos with speech also need captions (WCAG 1.2.2, Level A), which is outside what Altlark checks.

Embedded players

YouTube and Vimeo embeds can autoplay through URL parameters like autoplay=1. Altlark currently only checks <video> and <audio> elements, not embed URLs, so check your iframe src values for autoplay parameters and remove them, or make sure they're also muted. Give the iframe a title while you're there (see iframe titles).

What Altlark checks exactly

Altlark reports every <video> or <audio> element in the server HTML that has an autoplay attribute, as a warning ("Autoplaying video or audio", WCAG 1.4.2 / 2.2.2). If the element is also muted, the report adds a note that sound matters less but you should still check for pause controls if it moves for more than five seconds. It's a warning, not an error, because a short or muted clip with a pause control can be fine; the scanner can't see your controls or measure duration.

Limits

Autoplay started by JavaScript (video.play() on load), animated GIFs, CSS animations, Lottie files and auto-advancing carousels aren't detected by this check. Load your page with sound on and watch for anything that moves for more than five seconds without a way to stop it.

Testing it yourself

Load the page in a fresh browser tab with your sound on. Count how long any audio plays; if it's more than three seconds, there must be a visible way to pause or stop it, or a separate volume control. Then watch the page for motion: background videos, sliders, tickers or animated graphics that run longer than five seconds next to other content need a pause, stop or hide control. Try reaching that control with the Tab key, and make sure pressing Enter or Space actually stops the motion. Finally, turn on reduced motion in your operating system (Settings > Accessibility on most systems) and reload: a thoughtful site will tone down or stop its animations.

Checklist

1. Run the free scan and check for autoplay warnings.
2. Remove autoplay from anything with sound.
3. Mute decorative background video and add a visible pause button.
4. Respect prefers-reduced-motion.
5. Check carousels and embedded players by hand.