This page is in progress -
Why This is Important
Being able to pause audio that plays automatically helps remove distractions, especially for screen reader users and for people with attention and cognitive disorders.
If audio plays automatically and there’s no way to pause it, that becomes very distracting for people.
This is especially inaccessible to screen reader users, who are primarily Blind and visually impaired people, because they listen to the audio from the screen reader to understand what they’re interacting with.
This also affects people with attention and cognitive disorders because the audio may distract them from interacting with and navigating the app to a higher degree than neurotypical folks.
This references WCAG criterion 1.4.2 Audio Control (Level A).
How to Implement This
First, it may be helpful to think about the user experience. Anything that happens automatically is a little jarring because the user didn’t prompt that change. Is automatically playing audio essential to the experience? You may not need it.
Most embedded audio players come with audio controls, including a play/pause button. For example, this audio component is from MDN Web Docs:
<audio controls src="/media/cc0-audio/t-rex-roar.mp3">Your browser does not support the <code>audio</code> element.</audio>
There are ways to hide the audio controls and deactivate mouse and keyboard input on them. Do not do this! Leaving the controls visible and accessible to mouse, keyboard, and assistive tech is the best option.
Here are some examples of audio players with a focus on accessibility that you can add to your site:
How to Test This
This requires manual testing. Listen for audio that automatically plays on page load.
Contribute and Give Feedback
If you would like to provide feedback or contribute content on this resource, please fill out the form below.