# No auto-playing audio or video without controls

- **Pattern:** `ab-000086` (`accessibility-wcag.operable.no-auto-play`)
- **Severity:** low
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-000086
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-000086)

## 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`:

```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:** `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:

  ```tsx
  // 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

- wcag 1.4.2
- wcag 2.2.2
- section-508 415.1

Taxons: accessibility

HTML version: https://auditbuffet.com/patterns/ab-000086