WCAG 2.2 Demo Suite

1.4.2 Level A Guideline 1.4 Distinguishable Added in WCAG 2.0 Partly detectable automatically

Audio Control

If audio plays automatically for more than three seconds, a mechanism is available to pause, stop, or independently control its volume.

Who this affects

Screen reader users hear the page audio and their screen reader simultaneously, making both unintelligible. Users with cognitive and attention disabilities are unable to concentrate.

The failure and the fix

Each example below is a self-contained page, loaded in a frame so its markup cannot affect this page. Open either one on its own to test it with a keyboard or screen reader.

Fails 1.4.2

Open the failing example in a new tab

fail.html — the problem

<h1>Riverline Books</h1>

<!-- FAILURE: audio starts automatically, runs longer than three seconds, and
     has no pause, stop or independent volume control - the controls attribute
     is missing, so the player renders as nothing at all.

     Why this is worse than annoying: a screen reader user now hears the page
     audio and their screen reader speaking at the same time, through the same
     output. Both become unintelligible, and the controls they would use to
     stop it are exactly what they can no longer hear well enough to find.

     Note that most browsers now block autoplay with sound, which masks this
     failure during testing. Do not rely on that: it is not universal, it does
     not apply once the user has interacted with the site, and it is not a
     reason to ship the pattern. -->
<audio src="../../assets/media/shop-doorbell.mp3" autoplay loop></audio>

<p>Welcome to our shop. Browse this week's staff picks below.</p>
<p>Ambient shop sounds are playing to set the mood.</p>

Meets 1.4.2

Open the passing example in a new tab

pass.html — the fix

<h1>Riverline Books</h1>

<!-- FIX 1: nothing plays until the user asks. This is the safest answer and
     almost always the right one - 1.4.2 only applies to audio that starts
     AUTOMATICALLY, so user-initiated audio is out of scope entirely. -->
<h2>Ambient shop sounds</h2>
<p>Play the shop's ambient recording if you would like to.</p>
<audio controls src="../../assets/media/shop-doorbell.mp3"></audio>

<!-- FIX 2: if a design genuinely requires autoplay, the stop control must come
     FIRST in the page, before the audio starts, and be reachable by keyboard.
     A control buried in a footer does not help someone who cannot hear their
     screen reader well enough to navigate to it.

     Note the three-second rule: audio shorter than three seconds is exempt,
     which is why a short notification sound is fine. Anything longer needs a
     control. -->

<p>Welcome to our shop. Browse this week's staff picks below.</p>

How to test it

Load the page and listen. If anything autoplays beyond three seconds, confirm a pause or stop control exists near the start of the page and is keyboard reachable before the audio becomes disruptive.

  • Automated

    Autoplay attributes can be detected; script-triggered playback and the presence of a usable control generally cannot.

    Relevant axe rules:

    • no-autoplay-audio

  • Keyboard

    Unplug the mouse. Move through the page with Tab, Shift+Tab, Enter, Space and the arrow keys. See the keyboard testing script.

  • Screen reader

    Listen to both examples with NVDA, JAWS, VoiceOver or TalkBack and compare what is announced. See the screen reader cheat sheets.

  • Visual

    Zoom to 200% and 400%, narrow the viewport to 320 px, and apply the text-spacing overrides. See the visual testing procedures.

In the specification