Knowledgebase

Respecting Reduced Motion Preferences Print

  • websiteaccessibility, website, troubleshooting, guide, howto, solution, zillionkinghost, hosting
  • 0

Animation and discomfort.

THE PROBLEM

Movement on screen causes genuine discomfort for some people: nausea, dizziness and disorientation.

Parallax scrolling, large transitions and autoplaying video are the common causes.

THE SYSTEM SETTING

Operating systems have a reduced motion preference. Browsers expose it to websites.

Respecting it is straightforward and rarely done.

WHAT TO DO

Provide a CSS rule that disables or reduces animation when the preference is set.

Any developer can implement this in minutes.

WHAT TO AVOID REGARDLESS

Autoplaying video with motion Content that moves while being read Parallax effects over large distances Flashing content, which can trigger seizures

THE FLASHING WARNING

Content flashing more than three times per second can cause seizures in susceptible people.

That is a serious harm, not a preference.

Avoid it entirely.

WHAT ANIMATION IS FINE

Small, purposeful transitions: a menu opening, a button responding.

Those aid understanding rather than causing difficulty.

TESTING

Enable reduced motion in your system settings and load the site.


Was this answer helpful?
Back

Are you happy with your experience? Leave us a review on Trustpilot.


Trustpilot