</>
ValidateHTML

Auto-Playing Audio or Video

Media that plays automatically with sound interferes with screen readers, which use audio output. When a video starts playing, the screen reader audio competes with the media audio, making both incomprehensible. Even for sighted users, unexpected audio is one of the most annoying web experiences.

Why It Matters

Auto-playing audio is a WCAG 2.1 Level A violation if it lasts more than 3 seconds and there's no way to pause or stop it. It causes screen reader users to immediately leave the page. Even auto-playing video without sound can be distracting for users with attention disorders.

Common Causes

  • Adding the autoplay attribute to a hero video or background audio for visual impact, with sound left on.
  • Embedding a third-party player or social widget that starts playing with sound by default.
  • Triggering audio or video playback on page load via JavaScript without any visible pause control.

Code Examples

Inaccessible
<!-- Auto-playing video with sound -->
<video autoplay src="promo.mp4"></video>

<!-- Auto-playing audio -->
<audio autoplay src="background-music.mp3"></audio>
Accessible
<!-- Video: muted autoplay with controls -->
<video autoplay muted controls src="promo.mp4"></video>

<!-- Better: no autoplay at all -->
<video controls src="promo.mp4">
  <track kind="captions" src="captions.vtt" srclang="en">
</video>

How to Fix

  • 1Remove the autoplay attribute from audio and video elements.
  • 2If autoplay is required (hero videos), add the muted attribute and provide visible controls to pause/stop.
  • 3Any auto-playing media must have a mechanism to pause, stop, or mute within the first 3 seconds.
  • 4Add captions/subtitles to all video content using the <track> element.

Frequently Asked Questions

Is muted autoplay allowed under WCAG?
Yes. WCAG 2.1 Success Criterion 1.4.2 targets audio that plays automatically for more than 3 seconds. Muted autoplay produces no sound, so it does not trigger that criterion, though you should still provide controls and avoid distracting motion.
Why does autoplay audio break screen readers specifically?
Screen readers convey everything through audio. When media plays automatically, its sound competes with the screen reader's speech, making both unintelligible and often leaving the user unable to find the control to stop it.
How do I keep an autoplaying hero video accessible?
Add the muted attribute, keep it short or looping, and provide a visible pause control. Avoid sound entirely on load, and respect prefers-reduced-motion for users who opt out of non-essential animation.

Check Your Accessibility Now

Our accessibility checker detects this issue automatically.

Open Accessibility Checker
Recommended

Cloudways · Managed Cloud Hosting

Fix accessibility errors, then deploy on Cloudways managed cloud (AWS, GCP, DigitalOcean).

Free 3-day trial · 30% off 3 months + free site migration with code MIGRATE303

Start free trial

Related Accessibility Errors

Missing Alt Text on Images

Missing alt text hides images from screen readers and Google Images. Learn why alt attributes matter for accessibility and SEO, and how to write them well.

Missing ARIA Labels on Interactive Elements

Without an aria-label, icon buttons and image links are invisible to screen readers. Learn when and how to use aria-label and aria-labelledby correctly.

Low Color Contrast

Low color contrast makes text hard to read for many users and fails WCAG AA. Learn the required contrast ratios and how to fix failing text and backgrounds fast.

View all accessibility errors