WCAG Principle: Perceivable
Guideline 1.4: Distinguishable (Make it easier for users to see and hear content including separating foreground from background)
Conformance Level: A (Minimal Requirement)
What is Success Criterion 1.4.2?
If any audio on a Web page plays automatically for more than 3 seconds, either a mechanism is available to pause or stop the audio, or a mechanism is available to control audio volume independently from the overall system volume level.
Since any content that does not meet this success criterion can interfere with a user’s ability to use the whole page, all content on the web page (whether or not it is used to meet other success criteria) must meet this success criterion.
Audio that plays automatically when a webpage loads can be confusing and distracting for screen reader users. They might hear both the text-to-speech output from their device and the other audio at the same time. This makes it hard to tell them apart or hear the screen reader’s speech output clearly.
Auto-playing audio can also make it tough for people with mobility impairments who rely on voice recognition software. It interfers with their voice input and makes it harder for them to seamlessly interact with websites and applications.
To make matters worse, most screen readers use the same volume control as other sounds. That makes it tricky to adjust the volume of one without affecting the other. To improve accessibility, users should be able to turn off or lower the volume of background sounds.
How does it make your website accessible?
A website that contains audio that plays automatically creates an annoying user experience for everyone. More importantly, it causes screen accessibility issues for people who rely on assistive technology. Meeting this success criterion helps them remain in control of their experiences and perform their tasks more effectively.
How to Meet Success Criterion 1.4.2
Common mistakes developers make:
- Adding automatic-playing audio on the web page that does not turn off within 3 seconds, and there is no way to turn it off.
- Hiding or removing audio controls to achieve a certain design or aesthetic goal.
- Using non-standard controls for audio content.
- Not testing audio controls for compatibility with alternative input devices.
How to fix these mistakes:
- Ensure that all background sounds on the website stop automatically after 3 seconds.
- Enable users to play sounds only when they request them.
- Provide a clearly labelled control near the beginning of the web page that turns off sounds that play automatically. It should be keyboard operable and located early in the tab and reading order.
- Thoroughly test audio controls with assistive technologies and mouse-alternative input devices such as keyboards to ensure that they are accessible, compatible, and usable.
How to test if you’ve met compliance:
- Check if an audio or video element has an active audio track.
- Check if the audio or video lasts longer than 3 seconds.
- Check if the element has an autoplay attribute.
- Check if the element has a muted attribute.
- Make sure that the media element has control to stop or pause it.
If checks 1-5 are true, then the content passes this success criterion.
Bad and Good Examples (With Developer code)
Code Snippet
<!-- HTML -->
<video autoplay muted>
<source src="video.mp4" type="video/mp4">
</video>In this code snippet, the <video> element has the autoplay and muted attributes. This violates the guideline as it plays the video automatically without user interaction and also mutes the audio.
Code Snippet
<!-- HTML -->
<video controls>
<source src="video.mp4" type="video/mp4">
<track kind="captions" src="captions.vtt" label="English" default>
</video>In this example, the <video> element includes the controls attribute, providing a control interface for the user to stop or pause the video. The presence of the <track> element indicates the availability of captions for improved accessibility.
Frequently Asked Questions
What do you understand by audio control?
Audio control in the context of web accessibility refers to providing the user with a mechanism to control the volume and playback of audio content that play automatically on a web page. The aim is to prevent interference with assistive technologies and ensure a more positive user experience for people with auditory or cognitive disabilities.
What content is tested for 1.4 2 audio control?
Content tested for 1.4 2 audio control includes autoplay audio, background music, and other embedded web content that plays audio automatically. Examples of such web content can are videos, audio players, slideshows, or presentations.
Do web notifications require controls to conform with WCAG?
Yes, web notifications require controls to conform with WCAG if they last for longer than three seconds. Even if it lasts for less than three seconds, it is better to add a control to mute the notification since it might distract or confuse some users.
