Motion Sensitivity

What Is Motion Sensitivity?

Motion sensitivity refers to how certain users, especially those with vestibular disorders or neurological conditions, react to animations, transitions, and flashing content. While motion can enhance UI/UX for some, it can trigger dizziness, nausea, headaches, or even seizures for others.

Example:
Auto-scrolling banners or parallax background effects may seem modern, but can cause disorientation for motion-sensitive users.

Why Motion Sensitivity Matters in Accessibility

For users with vestibular disorders or epilepsy, motion is not decorative—it’s disabling. Recognizing this, WCAG 2.1 introduced Guideline 2.3.3 (Animation from Interactions) and 4.1.3 (User Preferences) to ensure:

  • Motion can be reduced or disabled
  • Users are not exposed to harmful effects
  • Content remains usable without motion

Legal standards like the ADA (U.S.) and BFSG (Germany) require adherence to WCAG guidelines, making motion control a compliance necessity.

How to Support Motion-Sensitive Users

✅ Use the prefers-reduced-motion CSS Media Query

Modern browsers allow users to set a system-wide preference for reduced motion. You can respect this by implementing:

 

@media (prefers-reduced-motion: reduce) {
  * {
       animation: none !important;
       transition: none !important;
       scroll-behavior: auto !important;
    }
}

 

This is your first line of defense for accessibility-conscious web development.

Design Best Practices for TYPO3, WordPress & Beyond

TYPO3 Tips:

  • Avoid autoplay sliders or background animations in templates.
  • Use extensions that respect motion preferences or allow users to pause/stop motion.
  • Customize CSS with prefers-reduced-motion in your site packages.

WordPress Tips:

  • Choose themes that are labeled “Accessibility Ready”.
  • Limit animation-heavy plugins or page builders.
  • Provide pause/play controls on animated carousels or banners.

Universal Guidelines:

  • Avoid flashing content (especially 3+ flashes per second—WCAG 2.3.1)
  • Make transitions optional, subtle, and user-controlled
  • Let users opt out of auto-animated effects

Common Mistakes & Misconceptions

❌ “Motion makes the site look cool, so it’s worth it.”
 ✔️ Not if it alienates or physically harms your users.

❌ “Subtle fade-ins don’t matter.”
 ✔️ Even small transitions can trigger symptoms for users with vestibular conditions.

❌ “Animations are purely visual; they don't affect accessibility.”
 ✔️ Motion directly impacts usability and comfort, it's very much an accessibility issue.

Explore related glossary terms: WCAG, Cognitive Disabilities, User Preferences, Accessible UI, Web Accessibility

Key Takeaway

If motion isn’t optional, it isn’t inclusive.
 Accessibility-conscious design means giving users control over how they interact with your site. Respect motion sensitivity to ensure your digital experience is welcoming to all.

Want to Make Your Website Safer for Motion-Sensitive Users?

Run your site through the T3AA Accessibility Analyzer and download our Motion Accessibility Quick Guide to detect and correct motion-based barriers.
Design with care. Animate responsibly. Support comfort and clarity.