Your Fancy Animations Are Making Some Visitors Physically Ill
By The bee2.io Engineering Team at bee2.io LLC
The Plot Twist Nobody Saw Coming: Your Website Is a Motion Simulator
Remember when web design got really ambitious and we all collectively decided that static websites were basically the internet equivalent of beige wallpaper? Yeah, that was fun. Now everyone's got parallax scrolling, dancing hamburger menus, and background videos that autoplay like they're trying to win an award for "most unwanted surprise." Here's the thing though: while you're out here trying to win a design award, you're accidentally making millions of people feel like they're on a boat during a storm. And not the fun kind of boat. The "why did I eat that seafood platter" kind.
Vestibular disorders affect approximately 69 million Americans, according to published research on inner ear conditions. These aren't rare edge cases- they're your neighbor, your coworker, probably that person who left your website after three seconds and you thought they just weren't interested. Spoiler alert: they were interested. They were just busy fighting off vertigo.
Why Your Parallax Scrolling is the Modern-Day Spinning Chair of Websites
Let's talk about parallax scrolling because it's the opening act in this tragedy. You know the effect- background images move at a different speed than foreground elements, creating this super cool depth illusion that makes designers lose their minds in the best way possible. Problem is, for someone with a vestibular disorder, it's basically asking their brain to process conflicting motion signals while their inner ear is already having an identity crisis.
When your eyes tell your brain the website is moving one way and your vestibular system (the little guy in your ear keeping you balanced) says something different, things get weird. Dizziness. Nausea. Disorientation. Fun times all around. This is the web development equivalent of putting a padlock on your front door while leaving every window wide open and a neon sign that says "FREE STUFF." You're trying to impress people while simultaneously kicking them out.
- Auto-playing videos- They start moving the moment the page loads. Your visitor hasn't even decided if they like you yet, and already their inner ear is filing a complaint.
- Infinite scroll- Continuous motion that never gives the vestibular system a chance to catch its breath. It's like someone constantly nudging you while you're trying to read something.
- Animated transitions between pages- Smooth is nice. Too much smooth feels like motion sickness in slow motion.
Enter prefers-reduced-motion: The Accessibility Feature Everyone Ignores Until They Get Sued
Here's where it gets real. The prefers-reduced-motion media query has been around since 2018, which in web time is basically ancient history, like dial-up internet ancient. It's literally a CSS feature that says "hey, this user's operating system is telling me they want less motion." And yet, most websites treat it like it's optional. Spoiler: it's not.
When someone enables "Reduce motion" in their accessibility settings (macOS, Windows, iOS, Android- all of them have it), they're explicitly saying "my brain and I have negotiated a deal where we move less." Your website can respect that deal by checking for this preference and toning down the motion circus.
This is the actual code that respects it:
@media (prefers-reduced-motion: reduce) { /* remove animations here */ }
Congratulations, you just made your site accessible to millions of people and looked like a competent developer while doing it. This is the bare minimum equivalent of wearing pants to the office.
The Actionable Bit Where We Actually Fix This
So what do you do? First, audit your site for motion offenders. Look for parallax effects, autoplay videos, animated scroll triggers, and micro-interactions that could trigger vestibular havoc. Then implement prefers-reduced-motion to disable or significantly reduce those animations for users who need it.
Second, test with the setting enabled. Actually turn on "Reduce motion" on your device and visit your own website. Experience what your users experience. It's mildly humbling.
Third, use SCOUTb2 to scan your site and get a report on animation-heavy elements that might need attention. It's like having a friend who actually tells you when your fly is open.
The best part? Accessible design is often just good design. Reducing unnecessary motion makes your site faster, less cluttered, and generally more professional. It's like you accidentally stumbled into doing the right thing while trying to look smart.
Disclaimer: This article is for informational purposes only and does not constitute legal, professional, or compliance advice. SCOUTb2 is an automated scanning tool that helps identify common issues but does not guarantee full compliance with any standard or regulation.
Stop finding issues manually
SCOUTb2 scans your entire site for accessibility, performance, and SEO problems automatically.