Never play sound by itself

How to do it

Start audio, and video with sound, only when someone presses play. A background video may start by itself only with muted. Sound that starts alone drowns out a screen reader, so its user cannot find the stop button. Embedded players count too, so load them as Load embedded videos and maps only after a click says.

Examples

HTML example

<!-- Not this: sound starts on load. -->
<video autoplay src="/welcome.mp4"></video>

<!-- This: silent background loop, sound only on play. -->
<video autoplay muted loop playsinline src="/workshop-loop.mp4"></video>
<audio controls preload="none" src="/episode-1.mp3"></audio>

JavaScript example

await page.goto('https://example.com/');
await page.waitForTimeout(4000);
const loud = await page.$$eval('audio, video', els => els.filter(el => !el.paused && !el.muted).length);
expect(loud).toBe(0);

Python example

page.goto("https://example.com/")
page.wait_for_timeout(4000)
loud = page.eval_on_selector_all("audio, video", "els => els.filter(el => !el.paused && !el.muted).length")
assert loud == 0

How to check

A browser test loads each page type and waits 4 seconds. Every audio and video element is paused or muted, and every element with autoplay also has muted.

Sources

• WCAG 2.2 – 1.4.2 Audio Control

Related rules

• WEB-219 Load embedded videos and maps only after a click in Website