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¶

• Loud background music that overpowers speech

  copy

  <audio controls autoplay>
    <source src="interview_with_music.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
  </audio>

  • Issue:

    • The background music is too loud, which makes it difficult to understand speech.

  • Fix:

    • Reduce the volume of background sounds so that they are at least 20 dB lower than the main spoken content, or provide an option to mute the background audio.

• Background noise that does not stop:

  copy

  <audio controls autoplay>
    <source src="presentation_with_noise.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
  </audio>

  • Issue:

    • The background noise continues for the full duration of the content, which makes it difficult for some users to understand spoken words.

  • Fix:

    • The following are some ways to ensure that the background audio is compliant:

      • Provide a way to turned it off.

      • Ensure that it is at least 20 decibels lower than the foreground speech.

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

  copy

  <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.

  copy

  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

  copy

  <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.