20% Off My Easy-Peasy Proposal with the Coupon Code 20OFF (Now - April 30th)

Accessibility Weekly

Pause, Stop, Hide

Published:

amber-200

Amber Hinds

Equalize Digital

Amber Hinds is the CEO of Equalize Digital, Inc., a Certified B Corp specializing in WordPress accessibility, maker of the Accessibility Checker plugin, and lead organizer of the WordPress Accessibility Meetup and WP Accessibility Day conference.

Week 24

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

Join the Conversation!

There's a dedicated thread on this post inside of The Admin Bar community. Join in on the conversation, ask questions, and learn more!

Group Thread
amber-200

Amber Hinds

Equalize Digital

Amber Hinds is the CEO of Equalize Digital, Inc., a Certified B Corp specializing in WordPress accessibility, maker of the Accessibility Checker plugin, and lead organizer of the WordPress Accessibility Meetup and WP Accessibility Day conference.

Through her work at Equalize Digital, Amber is striving to create a world where all people have equal access to information and tools on the internet, regardless of ability. Since 2010, she has led teams building websites and web applications for nonprofits, K-12 and higher education institutions, government agencies, and businesses of all sizes. Through this journey, she learned about the importance of making websites accessible to everyone, and it has been her passion to bring awareness to accessibility and make website accessibility easier, ever since. 

Brought to you by:

Make your WordPress website accessible and ensure all people have equal access to your products or services, regardless of ability. Reach more customers, reduce liability, and increase conversions.

Come Join Us!

Join the #1 WordPress Community and dive into conversations covering every aspect of running an agency!

Kyle Van Deusen

Community Manager

More from Accessibility Weekly

Week 51

How Accessible is “Accessible Enough”

In an ideal world where clients have unlimited budgets and everything is custom, every website would …

Week 50

How to Sell Accessibility in New Builds

Creating websites that prioritize accessibility is no longer just a best practice—it’s a business must, especially …

Week 49

Accessibility in Web Development Contracts

Whether you’re running an agency or freelancing, having a clear contract for your web development and …