In short and in plain language
This article is about motion on websites. Sliders that move on their own look nice. But for some people they cause dizziness and nausea.
The WCAG are rules for accessible websites. They ask that you can stop motion that starts on its own.
Many people set their device to show less motion. A website can read this setting. It can then reduce the motion.
Less motion does not mean no motion. A soft fade or a pause button is often enough.
We are happy to check your animations for barriers.
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. In the US, around 35% (NHANES, 2001-2004) of adults aged 40 and over 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 US adults aged 40 and over 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: among US adults aged 40 and over who report no dizziness, 32% (NHANES, 2001-2004) show a vestibular impairment - 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. In the US, around 35% (NHANES, 2001-2004) of adults aged 40 and over show a vestibular impairment in standardized balance tests, and prevalence rises markedly with age. Notably, even among those who report no dizziness, 32% (NHANES, 2001-2004) are affected - 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 - the level referenced by EN 301 549, the relevant standard for the BFSG - 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. It makes sense to handle all three together, because they concern the same elements: sliders, videos, transitions and effects.
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: nothing may flash more than three times per second unless the flashes stay below the defined thresholds (W3C, WCAG 2.2). The aim is to avoid photosensitive seizures.
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. An assessment of every criterion therefore belongs alongside the automated measurement: all automatically starting elements are checked for a mechanism to stop them, flashing content against the thresholds. This assessment is part of a WCAG audit and complements the classic checkpoints such as contrast and structure. Whether your own prefers-reduced-motion rule takes effect in the right places shows when you open the page once with and once without the reduce motion system setting.
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 approach motion, contrast and structure together is shown with typical starting points in our reference fields. This turns a technical detail into a tangible gain in accessibility: for people with a vestibular impairment, in the US roughly 35% (NHANES, 2001-2004) of adults aged 40 and over, as much as for everyone who simply prefers things calmer.
Related Articles
Empty Links and Buttons: Giving Controls a Clear Name
Empty links and buttons are among the most common WCAG findings. Fix patterns for icon buttons, image links and “more” links, checked via the links list.
Customers over 65: removing barriers in your online shop
Three in four people over 65 are online, and 76 per cent of them shop there. Which WCAG criteria slow this clientele down and in which order to fix them.
Accessible Product Pages: Variants, Gallery, Add to Cart
A flaw in the product template appears on every item page. How to make variant choice, gallery, price line and add-to-cart feedback accessible.