7 issues found for 2.2.2 Pause, Stop, Hide

Ensure, all auto-starting movement that animates more than 5 seconds can be paused, stopped, hidden. Remediation can be done by:

• Not auto-starting movement

• Limit movement to 5 seconds and then go back to static fallback

• Allow pause, stop, hide via user controls

Ensure to provide a mechanism to pause, stop, hide for all moving objects / animations that automatically start and last longer than 5 seconds.

Also ensure to respect user preferences like prefers-reduced-motion, and reduce animation. You can use a media query as follows to wrap all animation to ensure animations are only shown to users that want to see them. (Side note: this is not a stand-alone remediation for the issue; it is an additional step. The pause, stop, hide mechanism must exist anyways)

@media screen and (prefers-reduced-motion: reduce) { }

The easiest fix for this criterion's failure observation is to limit all animation to <5 seconds. This way the animation is excluded from the criterion's requirements.

For more complex animations, a mechanism to pause, stop, hide (e.g. pause button) is another solution.

Best Practice: All moving content could have a static version which is used as the default. If and only if prefers-reduced-motion is not set, animations should be added as progressive enhancements.

• Remove video loop, or

• Add pause button to video loop

Ensure, all animations can be paused, stopped, hidden, or they are reduced to <5 seconds of movement.

Side note: Also ensure to respect user preferences for prefers-reduced-motion and either hide animations completely or reduce them.

Ensure, all animations can be paused, stopped, hidden, or they are reduced to <5 seconds of movement.

Side note: Also ensure to respect user preferences for prefers-reduced-motion and either hide animations completely or reduce them.

Embed a mechanism to pause, stop, hide the animation that is clearly identifiable as such by the user.

This can be a pause button (as used in other animations throughout the website).