Avoid Autoplaying Audio Without Controls
Rule ID: no-autoplay-audio
Ruleset: axe-core 4.10
User Impact: Moderate
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), Trusted Tester, EN 301 549
How to Fix the Problem
To ensure your content is accessible and compliant, avoid autoplaying audio unless specific criteria are met. Here are your options:
-
User-Initiated Audio Playback (Strongly Recommended):
Design your interface so that audio does not begin until the user explicitly chooses to play it. This is the most accessible and user-friendly approach. -
Limit Audio Duration to Three Seconds:
If you must autoplay audio, ensure it stops automatically within three seconds. -
Provide Accessible Audio Controls:
If autoplaying audio exceeds three seconds:-
Include clearly visible and operable controls to pause, stop, mute, or adjust the volume.
-
Make sure these controls are accessible via keyboard navigation and screen readers.
-
Position the controls near the autoplaying element or at a predictable, easy-to-find location on the page.
-
Example Fix Using HTML5 Controls:
Best Practices:
-
Never autoplay background music or sound effects without user consent.
-
Avoid looping autoplayed audio, even if it’s shorter than three seconds.
-
Always test with screen readers to ensure the audio controls are usable.
Why it Matters
For users who are blind or have low vision and rely on screen readers, overlapping audio can significantly impair their ability to interact with your website. Screen readers convert text to speech, and any autoplaying audio can interfere with that output.
If a user cannot immediately locate or activate a mechanism to pause or mute the sound, they may be unable to access your content at all. This can cause confusion, frustration, and a total block to usability.
Autoplayed audio also presents challenges for users with cognitive or neurological disabilities who may be sensitive to unexpected sounds.
Rule Description
This rule checks that <audio> or <video> elements do not autoplay sound for more than three seconds without a user control mechanism to stop, mute, or manage volume. It helps enforce accessibility by ensuring that users are not subjected to uncontrollable audio playback.
The Algorithm (in Simple Terms)
The rule will fail if:
-
An
<audio>or<video>element is set to autoplay and:-
It plays longer than 3 seconds, and
-
It does not have accessible controls to stop or mute the audio.
-
The rule passes if:
-
The element does not autoplay,
-
Or it autoplays for under three seconds and does not loop,
-
Or it autoplays but provides usable, accessible controls,
-
Or it has a defined duration range within three seconds.
Special cases where the rule returns undefined:
-
<audio>or<video>elements without a source (no audio can be interpreted).