Motion

Users notice that large-scale motion on screen can cause dizziness, nausea, and headaches.

The option to reduce motion is available in:

iOS - Settings > Accessibility > Motion
Android - Settings > Accessibility > Remove Animations
Mac - Settings > Accessibility > Display
Windows - Settings > Ease of Access > Display > Show animations

The prefers-reduced-motion CSS media feature is used to detect if the user has requested that the system minimize the amount of non-essential motion it uses.

You can use this property to disable animations and minimize motion either via CSS:

@media (prefers-reduced-motion: reduce) {
  .animation {
    animation: none;
    transition: none;
  }
}

Or via Javascript:

var motionQuery = matchMedia('(prefers-reduced-motion)');
function handleReduceMotionChanged() {
    if (motionQuery.matches) {
        // adjust properties
    } else {
        // standard motion
    }
}
motionQuery.addEventListener('change', handleReduceMotionChanged);
handleReduceMotionChanged(); // trigger once on load

References

WCAG 2.2.2, 2.3.1, 2.3.3

References​

References