Skip to main contentSkip to navigationSkip to footer
195+ Principles LibraryResearch-backed UX/UI guidelines with citationsAI Design ValidatorValidate AI designs with research-backed principlesAI Prompts600+ research-backed prompts with citationsFlow ChecklistsPre-flight & post-flight validation for 5 flowsUX Smells & FixesDiagnose interface problems in 2-5 minutes
View All Tools
Part 1FoundationsPart 2Core PrinciplesPart 3Design SystemsPart 4Interface PatternsPart 5Specialized DomainsPart 6Human-Centered
View All Parts
About
Sign in

Get the 6 "Must-Have" UX Laws

The principles that fix 80% of interface problems. Free breakdown + real examples to your inbox.

PrinciplesAboutDevelopersGlossaryTermsPrivacyCookiesRefunds

© 2026 UXUI Principles. All rights reserved. Designed & built with ❤️ by UXUIprinciples.com

ToolsFramework
Home/Part VI - Human-Centered Excellence/Inclusive Accessibility Practice

Motion and Sensory Sensitivity Design

motion sensitivity designprefers-reduced-motionvestibular disorders uxphotosensitive epilepsy webthree flashes thresholdpause stop hidesensory overload accessibility
Intermediate
11 min read
Contents
0%

Motion and Sensory Sensitivity Design is the practice of building interfaces that do not harm or overwhelm people with vestibular disorders, photosensitive epilepsy, or sensory-processing differences. It covers three related needs: reducing motion for people whom animation makes dizzy or nauseous, avoiding flashing that can trigger seizures, and lowering sensory load for people whom autoplay, sound, and competing movement overwhelm. Of all accessibility work, this is the area where getting it wrong can cause physical harm, not just frustration.

The mistake is to treat motion as pure decoration with no cost. Parallax scrolling, large entrance animations, and motion-heavy transitions can trigger dizziness, nausea, vertigo, and migraines in people with vestibular conditions, and web.dev notes that over a third of adults will experience some form of vestibular dysfunction by age 40. Flashing content is more serious still: content that flashes more than three times per second can trigger seizures in people with photosensitive epilepsy. These are not edge cases to style around; they are safety constraints.

The good news is that the platform gives you the controls. The prefers-reduced-motion media query reports the user's operating-system motion preference, so you can reduce or replace animation for anyone who asked for less. WCAG sets a hard, Level A safety rule against flashing. And the pause-stop-hide criterion requires giving users control over autoplaying motion. Respecting these is mostly a matter of treating less motion as the safe default.

The principle: respect prefers-reduced-motion, never flash more than three times per second, give pause/stop/hide control over autoplaying motion, and keep sensory load low by default.

The Research Foundation

Motion and sensory accessibility rests on a safety guideline, a user-preference signal, and clear thresholds.

WCAG Guideline 2.3 states the goal plainly, as MDN summarizes it: "Do not design content in a way that is known to cause seizures or physical reactions." Two success criteria make it concrete. SC 2.3.1 Three Flashes or Below Threshold (Level A) requires that pages "do not contain anything that flashes more than three times in any one second period," unless the flash is below the general and red flash thresholds. This is a basic, non-negotiable safety rule, not an advanced nicety. The Epilepsy Foundation of America working-group standard MDN cites defines a flash hazard precisely: luminance at or above 20 cd/m2, a frequency at or above 3 Hz, and a solid visual angle at or above 0.006 steradians (roughly 25 percent of screen area at typical viewing distance).

The user-preference signal handles vestibular needs. SC 2.3.3 Animation from Interactions (Level AAA) requires that motion animation triggered by interaction can be disabled unless it is essential, and the W3C names the prefers-reduced-motion CSS media query as a sufficient technique. The media query checks the user's OS-level motion setting, so a site can reduce or remove non-essential animation for users who have asked for less, addressing the dizziness, nausea, and migraines that motion can trigger. The honest boundary is the word essential: a loading indicator or a progress animation that conveys necessary information is exempt; a decorative parallax effect is not.

The control requirement handles autoplay and overload. SC 2.2.2 Pause, Stop, Hide (Level A) requires a mechanism to pause, stop, or hide any moving, blinking, or auto-updating content that starts automatically, lasts more than five seconds, and is shown alongside other content. This protects people who are distracted or overwhelmed by motion, including many with attention and sensory-processing differences, and it pairs with calm-by-default choices such as no autoplay sound.

Tooling has caught up on the dangerous part. The original Photosensitive Epilepsy Analysis Tool (PEAT) is retired; its successor, the Harding Flash and Pattern Analyzer, is what platforms like YouTube and Vimeo now run on upload to screen for flash risk. Screening media for flashing before it ships is now a standard, available step.

Why It Matters

For Users: When a site respects reduced motion and never flashes, you can use it without getting dizzy, nauseous, or, in the worst case, having a seizure. Control over autoplay means it does not overwhelm you.

For Designers: Motion has a cost some users pay in their body. Design a reduced-motion alternative for every animation, keep transitions calm, and never rely on large movement or flashing for effect.

For Developers: The platform gives you the levers. Wire prefers-reduced-motion into your CSS and JS, screen media for flash risk before publishing, and add pause/stop/hide controls to autoplaying content.

For Accessibility: This is the safety-critical corner of accessibility. The three-flashes rule is Level A precisely because the consequence is a seizure. Treat it as a hard constraint, not a guideline to weigh against aesthetics.

How It Works in Practice

Motion and sensory accessibility comes down to reduced-motion support, the flash rule, user control, and calm defaults.

Respect prefers-reduced-motion. Detect the OS setting and reduce or replace non-essential animation. Swap large movement for a simple cross-fade or no animation. Keep only motion that is essential to meaning.

Never flash more than three times per second. Treat the WCAG 2.3.1 threshold as a hard rule. Screen video and animation with a flash and pattern analyzer before publishing, and avoid rapid light-dark transitions and strobing entirely.

Give pause/stop/hide control. Any motion that auto-starts and lasts over five seconds, auto-advancing carousels, and auto-updating feeds need an obvious way to pause, stop, or hide them.

Keep sensory load low by default. No autoplay sound, no competing simultaneous animations, no surprise motion. Calm defaults help people with sensory-processing and attention differences, and everyone in a quiet room.

Design the reduced-motion path first. Treat less motion as the baseline experience and added motion as the enhancement, so the safe version is never an afterthought.

Get 6 UX Principles Free

We'll send 195 research-backed principles with copy-paste AI prompts.

  • 195 principles with 2,300+ references
  • 600+ AI prompts for Cursor, V0, Claude
  • Defend every design decision with research
or unlock everything
Get Principles Library — Was $79, now $59 per year$59/yr

Already a member? Sign in

Was $79, now $59 per year$79 → $59/yr — 14-day money-back guarantee

Also includes:

How It Works in Practice

Step-by-step implementation guidance

Premium

Modern Examples (2023-2025)

Real-world implementations from top companies

Premium
LinearStripeNotion

Role-Specific Guidance

Tailored advice for Designers, Developers & PMs

Premium

AI Prompts

Copy-paste prompts for Cursor, V0, Claude

Premium
3 prompts available

Key Takeaways

Quick reference summary

Premium
5 key points

Continue Learning

Continue your learning journey with these connected principles

Part VI - Human-Centered ExcellencePremium

Operable Principle (WCAG)

Operable principle (WCAG 2.2 2023) ensures keyboard accessibility, adequate timing, and 44×44px touch targets, achieving...

Intermediate
Part VI - Human-Centered Excellence

Inclusive Wellbeing Principle

Inclusive wellbeing (Holmes 2018, WHO 2020) optimizes for physical, mental, emotional, and social health across diverse ...

Advanced
Part VI - Human-Centered ExcellencePremium

Accessible by Default

Accessible by Default builds accessibility into the system, tokens, components, linting, and CI, so every instance inher...

Intermediate
Part VI - Human-Centered ExcellencePremium

Perceivable Principle (WCAG)

Perceivable principle (WCAG 2.2 2023) requires text alternatives, captions, adaptable content, and 4.5:1 contrast, achie...

Intermediate

Licensed under CC BY-NC-ND 4.0 • Personal use only. Redistribution prohibited.

Previous
Assistive Technology Compatibility
All Principles
Next
Accessible AI Interfaces
Validate Motion and Sensory Sensitivity Design with the AI Design ValidatorGet AI prompts for Motion and Sensory Sensitivity DesignBrowse UX design flowsDetect UX problems with the UX smell detectorExplore the UX/UI design glossary