Perceivable · 1.4 Distinguishable
If audio plays automatically for more than 3 seconds, there must be a way to pause or stop it, or to set its volume separately from the system volume. Because such audio can block use of the whole page, every part of the page must meet this, not only content relied on for conformance.
Live demo
The same task, done two ways: switch between the version that passes and the one that fails, or put them side by side. Everything in the box is live, so try it with a keyboard, a pointer or a screen reader.
Press Allow sound in this demo, or watch the meter. In each version, look for a way to stop the music.
Rooms with a balcony over the bay, from $140 a night.
Breakfast on the terrace is included in every stay.
Check availabilityRooms with a balcony over the bay, from $140 a night.
Breakfast on the terrace is included in every stay.
Check availabilityThe tools follow the version you last used.
What happened
Why it passes
The music starts by itself, but a Pause music button and a volume slider come first on the page, so a screen reader user can silence it at once and hear their screen reader again.
Why it fails
The music starts by itself and keeps playing with no way to stop it. A screen reader user cannot hear their screen reader over it, and the only fix is to turn down the whole device's volume.
Examples
Five examples, each one running: the usual ways this criterion fails, and code that passes. Listen to them, measure them, or copy the code.
− autoplay + controls
Fails
Live preview
<h1>Sea View Hotel</h1><audio src="/media/lobby-music.mp3" autoplay loop></audio>If the browser allows autoplay, the music starts on load and loops with no controls, so it plays for more than 3 seconds and only the system volume can silence it.
Passes
Live preview
<h1>Sea View Hotel</h1><audio src="/media/lobby-music.mp3" controls loop></audio>Nothing plays until the person presses play, and the built-in controls can pause the music and set its volume (technique G171).
+ muted + controls
Fails
Live preview
<aside aria-label="Advertisement"> <video src="/ads/summer-sale.mp4" autoplay loop playsinline></video></aside>If the browser lets it start with sound, the soundtrack loops with no control to pause or mute it. 1.4.2 applies to the whole page, including ads.
Passes
Live preview
<aside aria-label="Advertisement"> <video src="/ads/summer-sale.mp4" autoplay muted loop playsinline controls></video></aside>The video starts without sound, so no audio plays automatically, and the controls let people turn the sound on if they want it.
Passes
Live preview
// <button id="music-toggle" type="button" aria-pressed="false">Mute music</button>const music = document.getElementById("lobby-music");const toggle = document.getElementById("music-toggle");toggle.addEventListener("click", () => { music.muted = !music.muted; toggle.setAttribute("aria-pressed", String(music.muted));});A toggle placed first on the page mutes the autoplaying music, and aria-pressed tells screen readers whether mute is on (technique G170).
Why it matters
Screen reader users may be unable to hear their screen reader over autoplaying sound, and people with attention or cognitive disabilities can be distracted by it.
W3C: Understanding 1.4.2Level A
Level A is the minimum: failing it can shut some people out completely.
Where it is required
Required where the law names WCAG 2.0 or later at this level: the United States, Canada, the European Union, the United Kingdom, France, Germany, Italy, Spain, the Netherlands, Ireland, Norway, Switzerland, India, Japan, Australia, New Zealand and Israel.
How to test
A few concrete steps. Automated tools find some failures; most need a person.
Common failures