WebsightWhat it asks for, in plain English
Anything that moves, blinks or scrolls, starts by itself, runs for more than five seconds and sits next to other content needs a control that pauses, stops or hides it. Carousels, animated banners, background video, scrolling tickers and looping animations all count.
Content that updates by itself, such as a live news feed, stock prices or a refreshing dashboard, needs a way to pause, stop or hide the updates, or to set how often they happen.
The exception is movement that is essential, for example a progress spinner that would be meaningless if paused. Short animations under five seconds are allowed, which is why the rule catches carousels but not a two-second fade-in.
This is an independent explanation. The binding wording is the W3C Recommendation, and the W3C's own Understanding 2.2.2 page has the full intent, techniques and definitions.
Who it affects
Someone with ADHD cannot read the paragraph next to a carousel that keeps sliding every four seconds.
A person using screen magnification has a slide change under them and loses the text they were reading.
Someone with a vestibular disorder feels nauseous from a looping background video and has no way to stop it.
How to check it
- Load the page and watch for five seconds without touching anything. Note everything that moves, slides, blinks or updates.
- For each one, look for a visible pause, stop or hide control. It should be easy to find and work with the keyboard.
- Press it and confirm the movement stops completely rather than slowing or restarting on the next slide.
- Check with your operating system's reduce motion setting on; a well-built page honours it.
What Websight checks for 2.2.2
Websight runs these automated checks for 2.2.2:
blink
The blink element makes text flash on and off and gives nobody a way to stop it.
A
Do not use the marquee element
marquee
The marquee element scrolls text across the page and never stops.
Websight flags the old <blink> and <marquee> elements. Carousels, CSS animations, video and script-driven updates need a person to watch the page, so this is on the manual checklist.
Practical tips
- Default carousels to not auto-advance. If they must, add a visible pause button as the first control.
- Respect the prefers-reduced-motion media query and switch off decorative animation when it is set.
- Give live feeds a 'pause updates' toggle and keep the page still while it is paused.
Other criteria in guideline 2.2, Enough Time
- 2.2.1 Timing Adjustable (level A)