Pause, Stop, Hide

What do background videos, carousels, animated GIFs, and the dreaded background music all have in common?

Besides the fact that clients love them despite our effort to convince them otherwise, these are all examples of website elements that automatically play when a web page loads.

As discussed in our post on animated GIFs, there are Web Content Accessibility Guidelines (WCAG) that require you to give users the ability to control animation on websites. Likewise, WCAG requires that users should be able to stop audio that plays automatically as well.

Relevant WCAG Success Criteria

Here are the relevant success criteria:

1. 1.4.2 Audio Control: If any audio on a Web page plays automatically for more than 3 seconds, either a mechanism is available to pause or stop the audio, or a mechanism is available to control audio volume independently from the overall system volume level.
2. 2.2.2 Pause, Stop, Hide: For any moving, blinking, scrolling, or auto-updating information that starts automatically, lasts more than five seconds, and is presented in parallel with other content, there must be a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential.

Essentially what both of these require is that there has to be an accessible button on the page that allows the user to stop the animation or sound.

Why This Matters

The Annoyance of Autoplaying Sound

In 2023, few websites play sound automatically on page load, and for good reason. This isn’t even an accessibility issue: most people don’t like being surprised by sound on websites.  If a client requests music or any sound that starts automatically, you may want to warn them against it due to a likely increase in bounce rates as annoyed users quickly leave the site.

From an accessibility standpoint, auto-playing sound can be very problematic because it can collide with screen readers and make it extremely difficult for people who are blind to understand the content on the website. It can be very difficult to understand a screen reader over music, let alone spoken words.

Motion and Accessibility

In the post about coding media queries for prefers reduced motion, we discussed that some movement – which can come from videos or slider transitions – can cause people with vestibular disorders to feel physically ill.

Some individuals with cognitive disabilities, such as attention deficit disorders or learning disabilities, may find it challenging to process or focus on multiple stimuli simultaneously. Auto-playing movement or sound can create distractions and make it difficult for them to comprehend or navigate the content.

Screen reader users may not be able to see a carousel that is auto-playing, but their screen reader will typically announce each slide change, which can be very confusing if it interrupts what the user is listening to elsewhere on the page. Some carousels might even move the focus back to the carousel every time the slide changes, taking the users away from what they were trying to read.

Give Control to Users

In an ideal world, there would be nothing that automatically plays on a website.

• No animated GIFs.
• No background videos.
• No auto-playing videos in the content.
• No carousels that change slides automatically.
• No music.
• No podcasts or “post readers” that start on page load.

The best experience for users is one in which they are given control over the sound, movement, and other interactions on a website.

Developers: if a client or a designer really wants something to autoplay, then you can add auto-playing sound or video as long as there is an accessible pause button that allows users to stop the sound or movement.

Designers: don’t forget to include pause buttons where relevant in your designs. It should be easy for users to find and stop sounds or animations on the site quickly, and including pause buttons in your designs is an example of “shifting left with accessibility.” This makes it clear to developers that they must code in a pause button when building your design.

Pausing Autoplay in WordPress

One of the biggest challenges in WordPress is that many plugins don’t have buttons for pausing on common autoplay elements, such as tickers, carousels, and background video blocks. If you’re trying to select a plugin for these elements, looking for the easy way to add a pause button is one of the top ways to rule a plugin in (or out).

If a page builder or block library you frequently use is missing pause buttons on these elements, submit a feature request to the developer.

Additional Resources

• Understanding Pause, Stop, Hide
• Understanding Audio Controls
• Hopefully, you don’t need this, but if you do: How to Convince a Client Their Site Doesn’t Need Music