Animations are meant to make a website feel alive: a slider that advances on its own, a hero image that glides into depth as you scroll, elements that ease in gently as they appear. What looks appealing in design terms can become a real problem for some visitors. In cases of vestibular sensitivity, large, unexpected or fast motion triggers dizziness, nausea and disorientation. Around 35% (NHANES, 2001-2004) of adults over 40 show a measurable vestibular impairment, many without knowing it. The German Accessibility Act has obliged large parts of digital consumer business to be accessible since 28 June 2025 (Bundesfachstelle Barrierefreiheit), and WCAG 2.2 names concrete mechanisms against motion-triggered discomfort. This guide shows how the CSS media query prefers-reduced-motion and a clean pause mechanism let motion work without doing harm - and how a WCAG audit checks animations systematically.
Key takeaways
- Motion is not neutral: large parallax effects, auto-starting sliders and fast transitions can trigger dizziness and nausea in cases of vestibular sensitivity - around 35% (NHANES, 2001-2004) of adults over 40 have a measurably impaired vestibular function.
- WCAG 2.2 offers two central levers: 2.2.2 Pause, Stop, Hide (Level A) for automatically starting motion and 2.3.3 Animation from Interactions (Level AAA) for motion triggered by interaction (W3C, WCAG 2.2).
- The CSS media query prefers-reduced-motion reads the user's system setting and lets you reduce or switch off animations in a targeted way without stripping the page functionally.
- The technique is long established: 50% (Web Almanac, 2024) of mobile sites already honour prefers-reduced-motion, up from just 34% (Web Almanac, 2024) in 2022.
- Reduce does not mean remove: a fade instead of a flight, a still frame instead of autoplay and a pause button on the slider keep the effect while respecting sensitive users.
- Symptom-free people are affected too: 32% (NHANES, 2001-2004) of adults over 40 have a vestibular impairment without consciously feeling dizzy - reduced motion helps far more people than is visible.
Why Motion Becomes a Barrier for Some People
The human balance system sits in the inner ear and constantly reports to the brain how the body is positioned and moving in space. It works closely with the eyes: what we see, the brain compares with what the inner ear reports. The problem arises precisely at this interface. When a website shows large-scale motion - a background that shifts as you scroll, an element that flies across the screen - the eyes signal a movement to the brain that the body does not feel. This contradiction is the same mechanism that causes motion and sea sickness. In sensitive people, a few seconds are enough to bring on dizziness, nausea, headaches or disorientation.
How widespread this sensitivity is often gets underestimated. Around 35% (NHANES, 2001-2004) of adults over 40 show a vestibular impairment in standardized balance tests, and prevalence rises markedly with age. Notably, 32% (NHANES, 2001-2004) of this age group are affected without ever having consciously felt dizzy - the impairment stays unnoticed until a trigger makes it visible. An elaborately animated home page can be exactly such a trigger. Add to this people with migraine, concussion after-effects or certain neurological conditions, for whom motion on screen produces an immediate symptom. Accessibility here does not mean going without but having a choice: those who are sensitive should be able to switch motion off without losing the content. How closely this goal ties into other checkpoints is shown in the article on the BFSG requirements.
The conflict between eye and inner ear
What WCAG 2.2 Requires About Motion
The Web Content Accessibility Guidelines address motion in several places, and it pays to distinguish the levels precisely. For conformance at Level AA, which the standard EN 301 549 referenced by the BFSG points to, two Level A criteria are relevant: 2.2.2 Pause, Stop, Hide and 2.3.1 Three Flashes or Below Threshold (W3C, WCAG 2.2). A third criterion, 2.3.3 Animation from Interactions, addresses reduced motion most directly but belongs to Level AAA and is therefore a recommendation rather than an obligation. In practice we handle all three together, because prefers-reduced-motion serves them with a single technical approach.
2.2.2 Pause, Stop, Hide
Level A: automatically starting motion lasting longer than five seconds needs a mechanism to pause, stop or hide it (W3C, WCAG 2.2).
2.3.1 Three Flashes
Level A: no content may flash more than three times per second, to avoid photosensitive seizures (W3C, WCAG 2.2).
2.3.3 Animation from Interactions
Level AAA: motion triggered by interaction, such as parallax, can be switched off unless it is essential (W3C, WCAG 2.2).
prefers-reduced-motion
The CSS media query reads the system setting reduce motion and switches animations off as needed.
Auto-start sliders
Carousels that advance on their own fall under 2.2.2 and need a visible, operable pause button.
Parallax and autoplay
Depth-scroll effects and automatically starting videos are among the most common triggers and belong in every audit.
The decisive point for practice is this: even though 2.3.3 is only Level AAA, reduced motion should not be treated as optional. First, a great deal of automatically starting motion already falls under the mandatory criterion 2.2.2. Second, the effort for clean prefers-reduced-motion support is small, while the benefit for sensitive people is large. Anyone who understands accessibility as a consistent quality - the way we describe it in our services - therefore builds motion in from the start rather than defusing it afterwards. An overview of the further changes in version 2.2 can be found in the article on the new WCAG 2.2 criteria.
Level A is mandatory, good practice goes further
prefers-reduced-motion: the Switch in the Operating System
Modern operating systems have offered a setting for years that lets users reduce motion system-wide - on macOS and iOS it is called Reduce Motion, on Windows Show animations, on Android Remove animations. Anyone who enables this option signals a clear need. The CSS media query prefers-reduced-motion makes that signal readable for the website. It knows two states: no-preference for the normal case and reduce as soon as the user has enabled the system setting. The recommended approach is to treat elaborate motion as an enhancement and pull it back in the reduce branch in a targeted way, rather than building animations in everywhere and laboriously removing them again.
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}This rule is deliberately defensive: it sets animation and transition durations practically to zero and stops endless repetitions instead of cutting motion off hard, which can cause its own problems. In practice a finer approach is often better - for example a gentle fade where an element flies in under normal conditions. Importantly, the media query is widely supported and leaves no excuse for its absence: 50% (Web Almanac, 2024) of mobile sites already honour prefers-reduced-motion, a clear jump from 34% (Web Almanac, 2024) in 2022. The technique is mature, broadly supported and costs little to implement.
Motion Patterns That Typically Cause Discomfort
Not every animation is equally critical. A discreetly lighting focus ring or a small hover effect on a button rarely causes discomfort. Motion becomes problematic when it is large, starts unexpectedly, runs fast or creates a sense of depth. The overview below sorts common patterns by their risk and names an accessible alternative for each that preserves the design intent without endangering sensitive users.
| Motion pattern | Risk | Accessible alternative |
|---|---|---|
| Parallax scrolling in the background | High: large, scroll-linked motion | Fix the background in the reduce branch, scroll content normally |
| Automatically starting slider | High: unexpected, repeated motion | Disable autoplay, add a visible pause button, allow manual paging |
| Scroll-triggered fly-in effects | Medium: many elements in motion | Gentle fade instead of a flight, short distance, respect reduce |
| Automatically playing background video | Medium to high: constant motion | Still image as poster, play only on click |
| Full-screen page transitions | Medium: fast, large-scale changes | Reduce the transition to a fade or switch directly |
Strikingly, almost all high-risk patterns start automatically and are large-scale - exactly the combination that overwhelms the inner ear. An automatically playing background video also combines motion risk with further barriers, such as missing captions; how to embed media accessibly overall is covered in the article on accessible media with captions and transcripts. Page transitions in single-page applications deserve attention too, because they combine motion with questions of focus - details in the article on focus management in single-page apps.
Pause, Stop, Hide: Control Over Auto-start Motion
For automatically starting motion, prefers-reduced-motion alone is not enough, because not every sensitive user has enabled the system setting. Criterion 2.2.2 therefore requires a visible, operable mechanism to halt running motion - specifically for anything that lasts longer than five seconds, starts automatically and runs in parallel with other content. The classic case is the image carousel on the home page. A pause button here is not an add-on but an obligation, and it must be more than a decorative symbol: it needs an accessible label, must be operable by keyboard and must report its state to assistive technology.
- A visible button to pause autoplay, reachable by keyboard
- A meaningful label such as pause slideshow instead of a bare symbol
- The state is reported to the screen reader via aria-pressed or a label change
- Autoplay pauses on keyboard focus and on pointer contact within the area
- In the reduce branch the carousel does not start automatically at all
- No content flashes more than three times per second, to avoid photosensitive seizures
The same logic applies to other auto-starting elements: tickers, marquees, animated statistics and self-opening dialogs. Wherever motion begins without the user's action, there must be a way to stop it. With dialogs and overlays there is the added point that their appearance itself can be a motion; how to design these patterns accessibly is explored in the article on accessible modals and overlays. The common denominator is control: the user, not the animation, sets the pace.
Reduce Motion, Do Not Abolish It
A common misunderstanding holds that accessibility demands going without any animation. The opposite is true. prefers-reduced-motion is a switch for a fraction of users, not for everyone. Those who have not enabled the setting see the full design; those who have receive a calm, equivalent variant. Good implementation therefore means designing two states: an expressive one for the normal case and a restrained one for the reduce case. In many cases it is enough to replace a movement with a gentle transition of opacity - an element then appears through a short fade rather than a flight across the screen.
Two states, one message
The Motion Audit as Part of the Accessibility Review
Whether animations meet the requirements cannot be checked by automation alone. A scanner can detect whether a prefers-reduced-motion rule exists in the stylesheet, but it does not judge whether it takes effect in the right places or whether an auto-start slider has an operable pause button. A motion audit therefore belongs in manual testing: the page is gone through once with the system setting enabled and once with it disabled, all automatically starting elements are checked for a stop mechanism, and large-scale motion is examined specifically for triggers. This very procedure is part of a complete WCAG audit and complements the classic checkpoints such as contrast and structure.
Good animation does not ask how much motion is possible but how little is enough to convey the intent. Leaving control to the user costs nothing in effect - and wins over everyone who would otherwise have looked away.
The connection reaches beyond mere compliance. Calm, controllable motion improves usability for everyone and at the same time pays into loading performance and discoverability - an effect explored in the article on accessibility and SEO as a double lever. Highly regulated offerings benefit too: accessible online banking, for instance, must be free of distracting or dizziness-inducing motion in critical moments such as payment confirmation. How we implement motion, contrast and structure together in projects is shown in our reference fields. This turns a technical detail into a tangible gain in accessibility - for the roughly 35% (NHANES, 2001-2004) of adults over 40 with vestibular sensitivity as much as for everyone who simply prefers things calmer.
Related Articles
Accessible Tooltips: Content on Hover or Focus (1.4.13)
Success Criterion 1.4.13 asks for three things at once: dismissible, hoverable, persistent. This article takes the wording apart, walks the BITV test path and.
Forced Colors: Supporting High Contrast Mode Properly
What forced colors mode does to your design, which properties fall away in the process and how to set up forced-colors, system colours and focus styles cleanly.
Accessible Maps: Store Locators Without Dead Ends
Map widgets fail audits with striking regularity. How a location search still works without a mouse, without colour perception and with a screen reader: list.