Do not autoplay audio
Content available in English only.
Accessibility isn’t just about avoiding violations — it’s about ensuring that everyone can use your product with confidence. This guide explains each rule’s intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).
These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.
If it makes sound, the user must choose when it starts.
Why this matters and how to fix it
Why this matters
When audio plays automatically, it competes with screen reader speech and overwhelms users who rely on auditory processing. It can also startle users, cause confusion, or make the page impossible to navigate, especially if the audio cannot be stopped.
How to fix this issue
Do not use `autoplay` for audio longer than 3 seconds. Provide visible and keyboard-focusable Play/Pause/Stop controls. If short audio feedback is required, keep it under 3 seconds and ensure it does not interfere with screen reader announcements.
Developer guidance
Disable autoplay by default in media or hero components. If auto-starting sound is required for a product need, require explicit user consent before playback. Add automated tests (Cypress/Playwright) to verify no media begins without user action.
Code examples
Incorrect Implementation
<audio autoplay src="intro.mp3"></audio>Correct Implementation
<audio controls src="intro.mp3"></audio>Real-World Examples
Before
<audio autoplay loop src="background-track.mp3"></audio>
<!-- Screen reader user cannot hear the screen reader → page becomes unusable -->After
<button id="playAudio">Play background sound</button>
<audio id="bgAudio" src="background-track.mp3"></audio>
<!-- User chooses when audio begins → full control maintained -->Manual testing
- 1. Load the page with speakers/headphones on.
- • Expected: No audio plays automatically for more than 3 seconds.
- 2. If audio begins automatically, look for clear, keyboard-focusable controls.
- • Expected: A 'Pause' or 'Stop' button is immediately visible and operable.
- 3. Turn on a screen reader and reload the page.
- • Expected: Screen reader speech is uninterrupted.
- 4. Attempt to operate playback controls using only the keyboard.
- • Expected: Controls are reachable via Tab and activate with Enter/Space.
- 5. If the audio is ambient or decorative, remove autoplay entirely.
Trusted by organizations across Europe working toward WCAG and EAA conformance