WCAG 2.2 Demo SuiteLow or No Background Audio
For prerecorded audio that is primarily speech, background sound is either absent, switchable off, or at least 20 dB below the foreground speech.
Who this affects
Hard-of-hearing users, for whom background music competes with speech and destroys intelligibility. Hearing aids amplify everything, not just the voice.
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.7
Open the failing example in a new tab
fail.html — the problem
<h1>Author interview: A. Marsh</h1>
<!-- FAILURE: a speech recording mixed with a music bed that sits only a few
decibels below the voice, and there is no way to turn the music off.
Why this matters more than it sounds: a hearing aid or cochlear implant
amplifies everything in the signal, not just the voice. Background music
that a hearing listener filters out effortlessly arrives at the same
volume as the speech, and the words become unrecoverable. Many people who
would never call themselves disabled cannot follow speech over music
either.
There is one mixed file, no speech-only version, and no music control. -->
<audio controls src="../../assets/media/shop-doorbell.mp3"></audio>
<p>Recorded live in the Riverside shop, with our usual background music playing.</p>Meets 1.4.7
Open the passing example in a new tab
pass.html — the fix
<h1>Author interview: A. Marsh</h1>
<!-- FIX: a speech-only version is offered. The criterion is satisfied by ANY
ONE of three routes:
1. no background sound at all, or
2. the background can be turned off by the user, or
3. the background is at least 20 dB below the speech. -->
<p>
<button type="button" class="button button--secondary" id="clean" aria-pressed="true">
Music is off</button>
</p>
<audio controls src="../../assets/media/shop-doorbell.mp3"></audio>
<p id="mode" role="status">Playing the speech-only version.</p>
<div class="note">
<h2>What "20 dB below" means in practice</h2>
<p>20 decibels is a ratio of ten to one in amplitude, and sounds roughly
<strong>four times quieter</strong> to a listener. It is much further down than
most people expect: if you can comfortably hear the tune, the mix is almost
certainly too loud to conform.</p>
<p>Measure it rather than guessing. In any audio editor, compare the loudness of a
speech passage against a passage of background alone.</p>
<h2>Scope</h2>
<p>1.4.7 applies to prerecorded <strong>audio-only</strong> content that is
<strong>primarily speech</strong> — a podcast, an interview, an audio guide.
It does not apply to music, to singing, or to audio logos shorter than the
threshold, and it does not apply to the soundtrack of a video (that is 1.2.x
territory).</p>
<p>The simplest way to conform is route 1: do not put music under speech at all.</p>
</div>How to test it
Listen for background music or ambience under narration. Confirm it is at least 20 dB quieter (roughly four times quieter in perceived loudness) or that a speech-only track is offered.
-
Automated
Requires audio analysis and listening.
No axe rule maps to this criterion. It has to be checked by a person.
-
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.
Related criteria
In the specification
- Understanding 1.4.7 Low or No Background Audio — the W3C explanation, intent and exceptions
- 1.4.7 in the WCAG 2.2 Recommendation — the normative wording