This Quick Audit video demonstrates how to check for autoplay, continuous animations, and content that may cause visual disorientation, using real-world examples from Wix and Shopify websites.
Autoplay Guidelines:
- Per WCAG standards, no content – such as audio, video, gifs, sliders, or carousels – should start automatically and continue for more than 5 seconds without user control.
- If autoplay content exists, it must include a clearly visible pause, stop, or hide control.
- Low-contrast pause buttons (like those on some Wix sections) fail accessibility even if they exist.
Example Audits:
Visually Disorienting Content:
- Elements that animate on scroll or move in multiple directions can trigger motion sickness.
- Especially problematic for people in motion, such as commuters.
Audit Recommendations:
- Scroll through the site using the Page Down key.
- Watch for any media that starts without interaction.
- Note if movement is triggered by scroll or persists without user control.
- Flag any elements that lack controls, have poor contrast, or behave unexpectedly.
Transcript
How do you check for autoplay, continuous animations, or visually disorienting content? In this video of the Quick Audit Series, we’re going to cover how to test content.
What we’re looking for is that no content such as audio, video, animations, carousels, sliders, gifs, or anything else, auto starts and continues for more than 5 seconds. That’s the specific WCAG guideline.
We’re also going to check for parallax and other visually disorienting content. Here we are starting on the Wix website. What I’m going to do first is I’m going to use the Page Down key on my keyboard to just page through the site.
Here I’m encountering my first moving thing. It appears to be a video or an animated gif, and it is started on its own, and it’s continuing for more than five seconds.
Pause Button
What we’re going to do is we’re going to look for a pause button. This one does have a pause button, but that pause button is really difficult to see because it doesn’t have any background color to create contrast. While the button exists, I would fault them on a contrast failure.
Next, we’re going to keep going through the site. Again, we have another item, and this time it actually has a much better pause button.
See, we have a background color and a foreground color. I’ll continue down the website checking for those. The next one we’re going to look at is the Shopify website.
Here on the top of their website, they have this autoplaying video, and it has no way to stop. Therefore, I would automatically fail that. Those are the automatic playing content that auto starts and continues for more than 5 seconds.
Wix Example
Now, we’re going to take a look at visually disorienting content. I’m going to go to the top of this Wix website, and this time I’m going to scroll down. What I’m looking for is things that are activated on scroll, such as these icons that are moving around.
This slide up of the content over the other content. This content can cause a lot of difficulty for people who have vestibular issues or people who get motion sick easily. This also can affect a lot of people who are commuting, riding in cars, traveling on trains, et cetera.
As I go through the site, I’ll make note of the sections. For example, this section automatically scrolls horizontally. You’re not supposed to be scrolling horizontally, randomly, all of a sudden, while I’m using a mouse scrolling downward motion.
That is counterintuitive for many people and can cause issues. Oh, boy, that was a lot of movement. Again, here we have a two different directions of movement. This can be particularly likely to cause motion sickness in people.
Shopify Example
Now we’re going to hop over to Shopify. Well, we already saw that they have a lot of movement going on that is causing issues. They have this whole section sliding in, and that can’t be stopped. They have another video section running, and that can’t be stopped.
There’s really a lot of issues going on here on this website that I would flag on an audit.
Conclusion
That goes over how to test for autoplay, continuous animations, and visually disorienting content for the quick audit. Make sure to check out the rest of the quick audit playlist and the quick audit series.
If you enjoyed this video and found it helpful, please give us a thumbs up and subscribe to the channel for more content on accessibility.