Loading...
Loading content...
Loading content...
Ensure background audio is low or can be turned off so speech is clear.
Why it matters: Background noise makes it hard for hard of hearing users to distinguish speech.
For prerecorded audio-only content that (1) contains primarily speech in the foreground, (2) is not an audio CAPTCHA or audio logo, and (3) is not vocalization intended to be primarily musical expression such as singing or rapping, at least one of the following is true: (Level AAA) No Background: The audio does not contain background sounds. Turn Off: The background sounds can be turned off. 20 dB: The background sounds are at least 20 decibels lower than the foreground speech content, with the exception of occasional sounds that last for only one or two seconds.
What This Means: This success criterion requires that for prerecorded audio content that is primarily speech (not music, singing, or rapping), the background audio must either be absent, can be turned off by users, or is at least 20 decibels lower than the foreground speech. This ensures that speech is clearly audible and not masked by background noise.
Why It's Important: Background audio can interfere with speech comprehension, especially for users who are hard of hearing or have auditory processing difficulties. Loud background music, sound effects, or ambient noise can make it difficult or impossible to understand the speech content. By minimizing or allowing control of background audio, we ensure that speech content is accessible to all users.
When creating audio content with speech, either eliminate background sounds entirely, provide a control to turn off background audio, or ensure background sounds are mixed at least 20dB lower than speech. This applies to podcasts, narrated content, instructional audio, and similar speech-focused media. Musical content, singing, and rapping are exempt as they are primarily musical expression rather than speech.
This criterion ensures that hard of hearing users can access and understand the content, improving their overall experience and ability to use the website effectively.
This criterion ensures that users with cognitive disabilities can access and understand the content, improving their overall experience and ability to use the website effectively.
Impact: When this criterion is properly implemented, it removes barriers for these user groups and creates a more inclusive web experience for everyone.
Audio has background music that is only 10dB lower than speech, making it hard to understand.
<audio controls>
<source src="speech-with-loud-background.mp3">
</audio>
<!-- Background is too loud, no control to turn it off -->Audio allows users to turn off background sounds or has background at least 20dB lower.
<audio controls>
<source src="speech-with-quiet-background.mp3">
</audio>
<button onclick="toggleBackground()">Toggle Background Music</button>This success criterion benefits the following user groups:
Tip: Use this checklist during development and testing to ensure all requirements for 1.4.7 Low or No Background Audio are met. Check off items as you complete them.
Note: These are official W3C resources for 1.4.7. For the most up-to-date information and detailed technical guidance, always refer to the official W3C documentation.
Implementing 1.4.7 Low or No Background Audio correctly requires understanding your specific context. Code solutions vary significantly based on multiple factors:
HTML, React, Vue, Angular, PHP, Python, and other frameworks each have different patterns and best practices.
Server-side rendering, client-side rendering, static generation, and hybrid approaches require different solutions.
Your existing components, styling approach, and UI library influence how accessibility must be implemented.
Your specific user base, content type, and interaction patterns determine the most appropriate implementation.
We provide tailored implementation guidance by analyzing your specific technology stack, coding patterns, design system, and project requirements. Our team reviews your codebase and provides custom solutions that integrate seamlessly with your existing architecture.
Get Custom Implementation HelpPart of
Perceivable PrincipleGuideline
1.4 Distinguishable