Accessibility for Developers

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

This can also benefit those on slow computers or who are on a slow remote desktop connection.

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.