moving-content-pausable
Content that moves by itself should be possible to pause, stop or hide
Asks about elements animated when the page loads, for more than five seconds or without end, whether the movement can be paused, stopped or hidden.
Applies to. Elements with an animation running when the scan starts, a CSS animation, a CSS transition or one a script started, on a time-based timeline (not scroll-driven), that is rendered, and that lasts more than five seconds from its start (its delay and every iteration) or never ends. Such motion started without the user asking for it. Without a browser's getAnimations (jsdom) nothing is applicable.
Expectation. WCAG 2.2.2 asks that moving, blinking or scrolling content that starts automatically, lasts more than five seconds and is shown beside other content can be paused, stopped or hidden, unless the movement is essential. Whether a control does that, and whether the movement is essential, is for a person to check, so each element is asked about (cantTell), once, however many animations it runs.
What a finding reports.
reasonCode:MOVING_CONTENT_LOOPSfor an animation that never ends,MOVING_CONTENT_OVER_5Sfor one that ends after more than five seconds.animations: the element's animations, up to five, each with itskind(css-animation,css-transitionorscript),name(the animation name or transitioned property,''when it has none) andendTime, in milliseconds from its start,nullwhen it never ends.
These data.details fields help to read and reproduce a finding. Apart from reasonCode and the few fields Output schema names as stable, they are not a stable contract: a field may be renamed or dropped in a minor release, so don’t build on them.
Examples
<style>@keyframes slide { to { transform: translateX(40px) } }</style><p style="animation: slide 2s linear infinite">Breaking news</p>
The paragraph moves by itself without end as the page loads; a person checks that a control pauses, stops or hides it.
How to check
When this rule can’t decide, it reports cantTell and leaves the question to a person. Each question it can ask is listed here under its reason code, with the steps to answer it. A finding carries the same steps as howToCheck, in the scan’s language. See Output schema.
MOVING_CONTENT_LOOPS
- Load the page and watch the element the report names; its animation starts by itself and never stops.
- Look for a way to pause, stop or hide it. It is often next to the content, such as a pause button on a slideshow, but it can be anywhere on the page, such as a setting that stops animations. Try it with the mouse and with the keyboard (Tab to it, press Enter or Space).
- Check whether the motion actually stops or the content is hidden, and stays that way.
- If there is no control, decide whether the motion is essential (removing it would change the meaning), or is a loading indicator shown alone.
Pass. A control that works with the keyboard pauses, stops or hides the motion, wherever it is on the page, or the motion is essential.
Fail. The content keeps moving and nothing on the page that works with the keyboard pauses, stops or hides it, which fails WCAG 2.2.2.
MOVING_CONTENT_OVER_5S
- Load the page and watch the element the report names; its animation starts by itself and runs for more than five seconds.
- Look for a way to pause, stop or hide it. It is often next to the content, such as a pause button on a slideshow, but it can be anywhere on the page, such as a setting that stops animations. Try it with the mouse and with the keyboard (Tab to it, press Enter or Space).
- Check whether the motion actually stops or the content is hidden, and stays that way.
- If there is no control, decide whether the motion is essential (removing it would change the meaning), or is a loading indicator shown alone.
Pass. A control that works with the keyboard pauses, stops or hides the motion, wherever it is on the page, or the motion is essential.
Fail. The content keeps moving and nothing on the page that works with the keyboard pauses, stops or hides it, which fails WCAG 2.2.2.