Provide a way to pause audio that plays automatically

A DJ booking website with a pause audio button
Image description: A website titled, "DJ String Bean." Below the button says, "Book me" and shows an image of a tall, green character wearing headphones. To the upper right is a pause button that says, "Pause mood setting music."

This page is in progress -

If you would like to contribute or make a case to prioritize this page, please fill out the form below.

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.

Credits

No credits yet. But this could be you!
No items found.

Contribute and Give Feedback

If you would like to provide feedback or contribute content on this resource, please fill out the form below.

Thank you, your submission has been received!
Oops! Something went wrong while submitting the form. Please check your internet connection and try again.

If you continue to encounter issues, please reach out to alexyingchen(at)gmail.com.