Website Animation Accessibility: How Motion Can Make Your Users Feel Sick
I Told an Agency Their Website Made Me Sick
I once emailed a design agency to tell them their website made me feel sick.
That probably wasn't the feedback they were expecting.
The website was beautifully designed. It had smooth scrolling, layered animations and content moving in different directions as I navigated the page. It looked polished and impressive.
The problem was that after a couple of minutes, I started feeling dizzy.
As someone who works in brand and web design, I immediately recognised what was happening. The website relied heavily on motion effects that can trigger symptoms for people with vestibular disorders, migraines and motion sensitivity.
It's something many designers simply aren't aware of.
If you've never experienced it yourself, it's easy to assume animations are harmless. But for some people, they can make a website uncomfortable—or even impossible—to use.
In this article, I'll explain why website animations can affect accessibility, which effects are most likely to cause problems and how you can create a website that's both engaging and inclusive.
Check Out My Website Audit
Many accessibility issues aren't obvious until someone points them out. From excessive animations and poor colour contrast to confusing navigation and unclear messaging, small design decisions can have a big impact on how people experience your website.
My Website Audit reviews your website, messaging, user experience and visual identity to uncover accessibility, usability and branding issues, with clear, practical recommendations to help you create a website that's more inclusive and easier to use.
Why Can Website Animations Make People Feel Sick?
Most people never think about website animations as an accessibility issue because they don't experience any problems themselves.
For others, excessive movement can make browsing a website genuinely uncomfortable.
Motion on screen can trigger symptoms for people with:
Vestibular disorders, including vertigo, Ménière's disease and other balance disorders. Parallax scrolling and large movements across the screen can cause dizziness, nausea and loss of balance.
Motion sensitivity, where fast-moving graphics, zoom effects or spinning elements can feel similar to motion sickness.
Migraines, which may be triggered or worsened by flashing effects, excessive movement or high visual stimulation.
Photosensitive epilepsy, where flashing or strobing content can trigger seizures.
Visual processing disorders, where complex movement makes information harder to understand.
Neurodivergent users, including some people with ADHD or dyslexia, who may find unnecessary animation distracting or overwhelming.
Older users and people with low vision, where movement makes text harder to follow or focus on.
With today’s screens (curved monitors, ultra-wides, giant TVs, even VR headsets), motion feels more intense than ever.
And on top of that, website builder platforms come with tons of flashy effects that can be used by anyone — often with little training. Even trained designers aren’t immune to creating seasick-inducing content.
When I was learning web design, the advice was to “surprise and delight” users with “immersive experiences.” That pretty much made it the industry standard to design roller-coaster-style websites. If you look at web design awards sites like Awwwards or SiteInspire, hardly any of the winning sites are accessible.
Why Are So Many Websites Still Full of Motion Effects?
Part of the problem is that website animations have been fashionable for years.
When I first learned web design, we were encouraged to create immersive digital experiences. Designers were told to "surprise and delight" visitors with movement, transitions and interactive effects.
That approach became incredibly popular.
Even today, many award-winning websites prioritise visual impact over accessibility. Browse galleries like Awwwards or SiteInspire and you'll see beautiful websites packed with scrolling effects, animated transitions and moving backgrounds.
They're visually impressive.
They're just not always comfortable to use.
Website builders have also made sophisticated animations available to almost anyone. With a few clicks, it's possible to add parallax scrolling, autoplay videos and entrance animations without understanding how they affect different users.
Good accessibility often means knowing when not to use these features.
Which Website Animations Cause Accessibility Problems?
Not every animation is bad.
Subtle movement that helps users understand what's happening can improve usability.
Problems usually arise when motion becomes decorative rather than functional.
Parallax scrolling
Parallax effects move background images at a different speed to the foreground.
Although they create depth, they can trigger dizziness for people with vestibular disorders and often create navigation issues for keyboard users.
And honestly? They're probably not as cool as we thought they were in 2011.
Full-screen background videos
Large autoplay videos immediately draw attention and create constant movement.
They can feel overwhelming, especially when users can't pause or stop them.
Automatic carousels
Auto-rotating carousels are one of those design trends that refuse to disappear.
Very few people actually click them, they can create accessibility barriers for keyboard users and they often move before someone has finished reading the content.
Animated GIFs
Fast-moving GIFs don't just create distraction.
They often prevent people from properly seeing the work you're trying to showcase.
Slowing them down usually creates a better experience for everyone.
Scroll-triggered animations
Having every heading, image and paragraph fly in from different directions might feel impressive during development.
For visitors, it can quickly become exhausting.
How to Design More Accessible Website Animations
Accessibility doesn't mean removing all animation.
It means using movement intentionally.
Here are a few simple ways to make your website more accessible.
Use animation with purpose
Animation should communicate something useful, not exist purely because the option is available.
Keep movement subtle
Small fades or gentle transitions are usually easier to process than dramatic movements across the screen.
Give users control
If content moves automatically, users should be able to pause or stop it.
Avoid autoplay videos without controls.
Think about mobile devices
Complex motion often performs poorly on smaller screens anyway.
Simpler interactions usually create a better experience across all devices.
Test your own website
Spend a few minutes browsing your own website slowly.
If everything is moving all the time, it might be worth simplifying.
What Is Reduced Motion?
Operating systems include accessibility settings that allow users to reduce animations throughout their devices.
Personally, I use Apple's Reduce Motion setting whenever I can.
After spending hours looking at websites every day, the calmer experience is genuinely more comfortable.
Users can enable reduced motion in:
Windows
macOS
iPhone and iPad
Android
Developers can then respect these preferences by using the prefers-reduced-motion media query, automatically reducing or removing unnecessary animations for people who have requested it.
It's a small feature that can make a huge difference.
How To Use Reduced Motion Settings
Windows 10: Start → Settings → Ease of Access → Display → Toggle “Show Animations in Windows”
macOS: System Preferences → Accessibility → Display → Check “Reduce Motion”
iOS: Settings → Accessibility → Motion → Toggle “Reduce Motion”
Android 9+: Settings → Accessibility → Remove animations
For developers: the magic line of code
You can respect user settings with a simple CSS media query:
@media (prefers-reduced-motion) { /* apply styles for users with reduced motion preferences */ }
Accessibility Doesn't Mean Boring Websites
One of the biggest misconceptions about accessibility is that it limits creativity.
It doesn't.
Some of the best websites I've used are beautifully designed without relying on constant movement.
Good design guides people through content, makes information easy to understand and creates moments of delight without making anyone feel uncomfortable.
Further reading
Creating accessible websites is about much more than reducing motion. If you'd like to make your content more inclusive, these articles are a great place to start:
Why you should stop using "click here" in your links. Learn why descriptive link text makes websites easier to navigate for screen reader users and improves the experience for everyone.
Alt text or image descriptions? Discover the difference between the two, when to use each one and how to write meaningful descriptions that give people the context they need.
10 ways to make your emails more accessible. Explore simple changes you can make to improve readability, navigation and usability in every email you send.
Community language vs inclusive language. Find out how to build a distinctive brand voice without unintentionally excluding the people you're trying to reach.
FAQs
-
Website animations can trigger dizziness, nausea, headaches or disorientation for some people, particularly those with vestibular disorders, motion sensitivity or migraines. Effects such as parallax scrolling, autoplay videos and large moving elements can create a disconnect between what the eyes see and what the brain expects, leading to symptoms similar to motion sickness.
-
Not all website animations are bad for accessibility. Subtle animations that provide useful feedback or guide users through an interface can improve the user experience. Problems arise when animations are excessive, distracting or impossible to pause, especially for people who experience motion sensitivity or use assistive technologies.
-
Reduced motion is an accessibility setting available on most operating systems that allows users to minimise animations and movement across websites and apps. Designers and developers can respect this preference by using the prefers-reduced-motion media query, reducing or removing non-essential animations for users who have enabled the setting.
-
Parallax scrolling can create accessibility barriers because it introduces large amounts of movement as users scroll. It may trigger dizziness or nausea for people with vestibular disorders and can also create challenges for keyboard navigation and screen reader users. For this reason, many accessibility professionals recommend avoiding parallax effects or providing a reduced motion alternative.
-
Absolutely. Accessibility doesn't mean removing animation altogether. Well-designed animations can provide helpful visual feedback, highlight important information or make interactions feel more intuitive. The key is to use motion sparingly, avoid unnecessary movement and always consider users who may be sensitive to animation.
-
Start by using animation only where it adds value. Avoid autoplay videos, large scrolling effects and constantly moving content. Keep animations subtle, give users control wherever possible and test your website with reduced motion enabled. Small changes can make a significant difference to the overall user experience.
-
Many accessibility issues aren't immediately obvious, especially if you don't use assistive technologies or experience motion sensitivity yourself. Reviewing your website against accessibility best practices, testing it on different devices and gathering feedback from real users can help identify barriers. A professional accessibility or brand audit can also uncover issues with motion, navigation, readability, colour contrast and usability before they affect your visitors.