1.4.7 Low or No Background Audio
What
Background sounds in audio content must be low enough in volume or absent entirely to ensure that the speech remains clearly distinguishable.
Why
People with hearing impairments, cognitive disabilities, or attention disorders find it difficult or even impossible to understand spoken content when the background noise is too high.
Affected users
This check primarily affects:
- Individuals with hearing loss, who may struggle to differentiate speech from background sounds.
- Users with auditory processing disorders, who may find it challenging to focus on spoken words if there is loud music, noise, or competing dialogue.
- People in noisy environments such as cafes and public transport, who may find it difficult to hear the main content when the background noise is too high.
Examples
This section provides some pass and fail examples.
Pass examples
- The background sound is either absent or very low compared to the main speech.
- The background sound is at least 20 dB lower than the speech.
- The audio includes an option to disable or adjust background audio separately.
- The background sound only plays for a short duration and then stops.
Example of a compliant audio file:
<audio controls>
<source src="podcast-without-background-music.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
- Why this is correct?
- No background music competes with the main speech.
- Users with hearing impairments or cognitive disabilities can clearly understand the content.
Fail examples
How
This section provides instructions on how to review and fix this issue.
How to review it
- Identify audio content on the page and answer the following question:
Does the page contain any pre-recorded audio such as background music, advertisements, or environmental sounds?
If the answer is yes, ensure that the page provides a way to disable or adjust the background audio separately.
- Assess the background noise level with the following method:
Measure the background noise and ensure that it is 20 dB lower than the foreground speech.
If background sounds do not stop or remain loud, then this check fails.
- Confirm compliance with automated tools with the following method:
Use an audio analyzer to verify that the background noise is at least 20 decibels lower than the foreground speech.
If the background audio plays for more than two seconds, ensure that there is an option to turn it off or adjust its volume separately.
How to fix it
This section provides some ways to fix this issue.
Provide an option to disable background audio
<audio id="background-music" controls loop>
<source src="background-music.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<button onclick="document.getElementById('bg-audio').pause()">Mute Background Audio</button>
- Why this works: The user can turn off the background audio if needed.
Ensure that the background sound is at least 20 dB lower than speech
- Lower the background music volume by at least 20 dB to make speech more intelligible.
- Remove background noise if it is not essential to the content.
Provide an option to turn off background sounds entirely
Add an option for users to disable background audio without affecting speech content.
Example:
<audio id="bg-music" src="background-music.mp3" autoplay loop></audio>
<button onclick="document.getElementById('bg-music').pause()">Turn Off Background Music</button>
- Why this works: The user has the option to stop the background music.
Use aria-live="assertive" for critical alerts
<div aria-live="assertive">An important announcement is now being read aloud.</div>
Additional resources
WCAG success criteria
1.4.7 Low or No Background Audio.
Low or no background audio
1.4.7 Low or No Background Audio
What
Background sounds in audio content must be low enough in volume or absent entirely to ensure that the speech remains clearly distinguishable.
Why
People with hearing impairments, cognitive disabilities, or attention disorders find it difficult or even impossible to understand spoken content when the background noise is too high.
Affected users
This check primarily affects:
- Individuals with hearing loss, who may struggle to differentiate speech from background sounds.
- Users with auditory processing disorders, who may find it challenging to focus on spoken words if there is loud music, noise, or competing dialogue.
- People in noisy environments such as cafes and public transport, who may find it difficult to hear the main content when the background noise is too high.
Examples
This section provides some pass and fail examples.
Pass examples
- The background sound is either absent or very low compared to the main speech.
- The background sound is at least 20 dB lower than the speech.
- The audio includes an option to disable or adjust background audio separately.
- The background sound only plays for a short duration and then stops.
Example of a compliant audio file:
<audio controls>
<source src="podcast-without-background-music.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
- Why this is correct?
- No background music competes with the main speech.
- Users with hearing impairments or cognitive disabilities can clearly understand the content.
Fail examples
How
This section provides instructions on how to review and fix this issue.
How to review it
- Identify audio content on the page and answer the following question:
Does the page contain any pre-recorded audio such as background music, advertisements, or environmental sounds?
If the answer is yes, ensure that the page provides a way to disable or adjust the background audio separately.
- Assess the background noise level with the following method:
Measure the background noise and ensure that it is 20 dB lower than the foreground speech.
If background sounds do not stop or remain loud, then this check fails.
- Confirm compliance with automated tools with the following method:
Use an audio analyzer to verify that the background noise is at least 20 decibels lower than the foreground speech.
If the background audio plays for more than two seconds, ensure that there is an option to turn it off or adjust its volume separately.
How to fix it
This section provides some ways to fix this issue.
Provide an option to disable background audio
<audio id="background-music" controls loop>
<source src="background-music.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<button onclick="document.getElementById('bg-audio').pause()">Mute Background Audio</button>
- Why this works: The user can turn off the background audio if needed.
Ensure that the background sound is at least 20 dB lower than speech
- Lower the background music volume by at least 20 dB to make speech more intelligible.
- Remove background noise if it is not essential to the content.
Provide an option to turn off background sounds entirely
Add an option for users to disable background audio without affecting speech content.
Example:
<audio id="bg-music" src="background-music.mp3" autoplay loop></audio>
<button onclick="document.getElementById('bg-music').pause()">Turn Off Background Music</button>
- Why this works: The user has the option to stop the background music.
Use aria-live="assertive" for critical alerts
<div aria-live="assertive">An important announcement is now being read aloud.</div>
Additional resources
WCAG success criteria
1.4.7 Low or No Background Audio.
Web Governance