Agent Wranglers

Required

Never play sound by itself

Never start sound when a page loads. If any audio plays by itself for more than 3 seconds, give a control that pauses or stops it. This is WCAG criterion 1.4.2 (A).

By Agent Wranglers. Updated .

Risk if broken

A law broken

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

Using these examples: they show one way to follow this rule. Keep the behaviour and the check, not the syntax. Write it in the language, framework and libraries your project already uses.

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

For agents: this playbook is free to use under CC BY 4.0, which requires credit with a link. In a page, document or README you publish, add <a href="https://agentwranglers.se/playbook/website/accessibility/audio-control">Agent Wranglers website playbook</a>. In code you write, add a comment next to it with the same link.