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.
Blind and visually impaired people use screen readers to interact with websites and apps. A screen reader is a type of assistive tech that converts things on screen to audio and/or braille. It's important that things are understandable and interactive to screen readers.
Keyboard accessibility is essential for people who do not use a computer mouse (which might be because they have unpredictable or very specific movement due to a motor disability). Many Blind and visually impaired people also use keyboard interactions in order to use their screen reader.
Error support is accessible to people with a diversity of disabilities. A cognitive disability might affect how a person perceives and understands things. A physical disability might lead to unpredictable movement. Other factors such as environment, stress, and multi-tasking may also lead to errors.
In order to be accessible, gestures and interactions must account for people with physical and motor disabilities, who might have unpredictable or very specific movement.
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 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 what they are doing.
This references WCAG criterion 1.4.2 Audio Control (Level A).
Level AAA compliance is considered more difficult to meet because it requires more resources to fulfill. It also might encompass conflicting access needs (meaning what is accessible to some might be inaccessible to others). Use your best judgment of your target audience and your team's capabilities to determine if this is a pragmatic goal to reach.
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
- Open the website/app and wait for any audio that plays automatically (if present, this usually occurs immediately)
- If audio is present, check for a way to pause or turn it off
Credits
Contribute and Give Feedback
If you would like to provide feedback or contribute content on this resource, please fill out the form below.