Skip to main content

No auto-playing audio or video without controls

ab-000086 · accessibility-wcag.operable.no-auto-play
Severity: lowactive

Why it matters

Audio that starts without user interaction collides with screen reader speech, rendering the page unusable for blind users until they locate and stop the media — and vestibular users, users on metered connections, and anyone in a quiet shared space are impacted too. This violates WCAG 2.2 SC 1.4.2 (Audio Control) and SC 2.2.2 (Pause, Stop, Hide), plus Section 508 refresh 415.1. Browsers already block autoplay-with-sound by default in most contexts, so shipping it means the hero video either fails silently on Chrome/Safari or blasts audio on the few engines that still honor it.

Severity rationale

Low because modern browsers block autoplay audio by default, limiting real-world impact, but it still fails WCAG and 508.

Remediation

Add muted alongside autoPlay for any hero or background video, and expose controls so users can pause. Never call .play() on an <audio> element during mount without an explicit user gesture. Example in src/components/Hero.tsx:

<video autoPlay muted loop playsInline controls src="/hero.mp4" />

For decorative background video, muted loop playsInline is the minimum; drop autoPlay entirely if the motion is not essential to the content.

Detection

  • ID: accessibility-wcag.operable.no-auto-play

  • Severity: low

  • What to look for: Count all <video> and <audio> elements with autoplay or autoPlay attributes. Count all JavaScript calls to .play() on media elements during page load. For each auto-playing element, verify it has the muted attribute or visible controls.

  • Pass criteria: Count all auto-playing media elements found. No more than 0 audio elements auto-play. Auto-playing video is either muted or has at least 1 visible control to pause/stop. No media plays audio automatically on page load without user interaction.

  • Fail criteria: Audio or unmuted video auto-plays without user interaction and without visible controls to stop it.

  • Skip (N/A) when: No audio or video elements detected in the project.

  • Detail on fail: "Video element in Hero.tsx has autoPlay without muted attribute — audio will play automatically"

  • Remediation: Auto-playing media with sound is disorienting for screen reader users and annoying for everyone:

    // Before — auto-plays with sound
<video autoPlay src="/hero.mp4" />

// After — auto-plays muted with controls
<video autoPlay muted loop playsInline controls src="/hero.mp4" />

External references

Taxons

accessibility

History