https://accessibilityfordevelopers.com/allow-disable-of-motion-animation/

Accessibility for Developers

Skip to main content

  * Guides/Articles
  * Glossary
  * About

Allow disabling of motion or animation

Last updated on January 01, 2022* A11y issues

Users that are prone to seizures or motion sickness may need to
disable animation or motion. Add an option for users to disable this.

 Check if users have 'prefers reduced motion' turned on

You can check this in CSS.

For example if you had this animated box:

<div class="animate-me">animated box</div>

You could animate it - except for users who have turned prefers
reduced motion on:

.animate-me {
  animation: pulse 400ms infinite;
}

@media (prefers-reduced-motion) {
  .animate-me {
    animation: none;
  }
}

 WCAG specification

 Success Criterion 2.2.2 Pause, Stop, Hide (Level A):

https://www.w3.org/WAI/WCAG21/Understanding/pause-stop-hide.html

    Success Criterion 2.2.2 Pause, Stop, Hide (Level A): For moving,
    blinking, scrolling, or auto-updating information, all of the
    following are true:

    Moving, blinking, scrolling For any moving, blinking or scrolling
    information that (1) starts automatically, (2) lasts more than
    five seconds, and (3) is presented in parallel with other
    content, there is 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; and

    Auto-updating For any auto-updating information that (1) starts
    automatically and (2) is presented in parallel with other
    content, there is a mechanism for the user to pause, stop, or
    hide it or to control the frequency of the update unless the
    auto-updating is part of an activity where it is essential.

    For requirements related to flickering or flashing content, refer
    to Guideline 2.3.

    Since any content that does not meet this success criterion can
    interfere with a user's ability to use the whole page, all
    content on the Web page (whether it is used to meet other success
    criteria or not) must meet this success criterion. See
    Conformance Requirement 5: Non-Interference.

    Content that is updated periodically by software or that is
    streamed to the user agent is not required to preserve or present
    information that is generated or received between the initiation
    of the pause and resuming presentation, as this may not be
    technically possible, and in many situations could be misleading
    to do so.

    An animation that occurs as part of a preload phase or similar
    situation can be considered essential if interaction cannot occur
    during that phase for all users and if not indicating progress
    could confuse users or cause them to think that content was
    frozen or broken.

Found this post useful?

Please consider sharing this link with your work colleagues or on
social media. There are no ads on my site, I just want to promote
accessibility.

Found an issue? please point them out - let me know if there is a
mistake and I'll update it

Follow me on Twitter: @A11yForDevs. I post links to interesting a11y
articles and resources.

More posts

Automated accessibility tools

I think there are a few ways to check the accessibility on a site.
One of those is definitely automated tools. There are some drawbacks...

May 27, 2022Read more, Automated accessibility tools

Use high contrast

Ensure that the colour selection for text and their background
colours have a high enough contrast ratio. Table of contents Why
should we...

May 27, 2022Read more, Use high contrast

Welcome to Accessibility for Developers

Find free guides and information on making your website or
application accessible.

New to accessibility?

If you are new to accessibility and want a gentle introduction, then
I recommend you start with our intro guide:

Read my beginners guide to accessibility

My accessibility guides and articles

  * Articles
  * Common a11y issues
  * Non technical guides
  * Technical guides

More tools

  * Accessibility Checklist

Accessibility for Developers

This is a free site to give advice on how to make your website
accessible

I have been a software developer for nearly a couple of decades, and
really want to help promote better accessibility in apps and websites
that we, as developers, create! Accessibility isn't very difficult,
it is just important to be aware about it and understand it.

If you spot any mistakes or have any suggestions, ideas or
collaborations please check out my contact page.

Important: The information on this website is for general
informational purposes only. I make no representation or warranty,
express or implied. Your use of the site is solely at your own risk.
I've tried my best to make sure all information is accurate, but I am
just a software engineer (not an accessibility expert).

Get in touch

Contact me

All content

Twitter @A11yForDevs