WCAG 1.4.2 — Audio Control

What this requires

If audio plays automatically for more than three seconds, there must be a mechanism to pause or stop it, or to control its volume independently from the system volume. The control must be available near the start of the page and operable from the keyboard. The criterion exists because autoplay audio interferes with screen-reader output: the screen reader and the page audio compete for the same ear at the same time.

How AI coding tools fail this

When asked to "add background music to the hero" or "play a welcome message on load", AI tools generate <audio autoplay loop> with no visible control, or attach autoplay logic to a <video> with sound on. The page loads, the audio starts, and the user has no obvious way to stop it without muting the whole tab.

The second pattern: autoplay video with sound. Modern browsers silently block this in many cases (which is a security feature, not a fix), but where it works — embedded conference players, kiosks, video backgrounds with the sound toggled on by JS — it fails 1.4.2 unless a control is available.

The third: chat widgets and notification systems that play sound effects on every new message. Three seconds is a low bar, but cumulative interruption is still disruptive. Provide a mute toggle.

Failing examples

Autoplay audio with no UI control:

<audio autoPlay loop>
  <source src="/hero-background.mp3" type="audio/mpeg" />
</audio>

Autoplaying video with sound and no visible mute control:

<video autoPlay loop>
  <source src="/hero-background.mp4" type="video/mp4" />
</video>

Passing examples

If you need autoplay audio, ship a clearly labelled, keyboard-operable control near the start of the page:

<header>
  <button onClick={toggle} aria-pressed={isPlaying}>
    {isPlaying ? "Pause background music" : "Play background music"}
  </button>
  <audio ref={audioRef} loop src="/hero-background.mp3" />
</header>

Better still: don't autoplay. Let the user opt in:

<audio controls preload="metadata">
  <source src="/welcome-message.mp3" type="audio/mpeg" />
</audio>

Edge cases

Three seconds is the floor. Two-second sound effects that play on load don't trip the criterion, but they may still annoy.
Muted autoplay video is fine — the criterion targets audio. <video autoplay muted loop> for a silent background animation is acceptable.
User-initiated audio (the user clicks play, the user starts a voice chat) isn't autoplay, so 1.4.2 doesn't apply.
Volume control independent from the system is the third option. A page-level volume slider satisfies the criterion even without a pause button.
Notification sounds in a long-running app should be defaulted to off or be easily muted from settings.

How Jeikin handles this

axe-core flags <audio autoplay> and <video autoplay> elements without paired controls. The dashboard maps each finding to WCAG 1.4.2 and tracks resolution. The harder question — "does the notification sound bypass the page-level mute?" — needs manual verification, captured as a guided review.