Glossary · Accessibility term
Vestibular disorder
A vestibular disorder is a condition affecting balance and spatial orientation, and it runs through the inner ear and the brain rather than the inner ear alone. That matters, because some of the conditions most relevant to screens are central rather than inner-ear ones. Motion on screen can trigger real dizziness, nausea and migraine, and the harm is physical and immediate rather than a matter of difficulty. Large movement is the trigger. Parallax scrolling, full-page transitions, backgrounds that scale, anything that moves a big share of the view at once. The order we would take it in has three steps and only the last two are things W3C documents as ways of passing. Leave the large movements out, because a page with no unnecessary motion has nothing to disable. Offer your own control for the ones that stay. And honor the reduce-motion setting, which every mainstream desktop and mobile platform now carries somewhere in its settings, in your stylesheet and in your scripts alike.
In practice
Which rule applies depends on what starts the motion, and only one of the two is in scope for a standard audit. Motion an interaction sets off, like a page that swoops when you click a link, sits at Level AAA. Motion the page starts by itself is Level A, under the rule about pausing, stopping or hiding, and that is where an autoplaying background video or a self-advancing carousel actually lands, once it runs past five seconds beside other content and is not essential to the activity. Plenty of animations manage to fail both.
Take the three steps in order, because the media query is the one teams start with and the one that should come last. Avoid the animation where it was never doing any work, which leaves nothing to disable. Give the user a control to turn off the ones that stay, which is a documented way of passing on its own. Then honor the platform's reduced-motion setting, which is another. That last one has two halves, because CSS and JavaScript are separate surfaces, so a site that respects the setting in its stylesheet while an animation library draws its own frames has not respected it.
Small fades and color changes sit outside this rule, and that is a definition rather than a concession. Changes of color or opacity that do not change the perceived size, shape or position of an element fall outside what the standard calls motion animation. Outside this rule is not outside every rule, though. Anything flashing still answers to the seizure criterion, whatever it is made of.
Tell people where the setting is rather than telling them to turn it on. Every mainstream desktop and mobile platform has one now, and the path is different on every one of them, buried under an accessibility or a display heading depending on where you are. "Enable reduce motion" without directions is not much help to the person who needs it most.
Why it matters
The reactions W3C names run to nausea, migraine headaches and needing to lie down to recover. Somebody can be made genuinely unwell by your homepage, and you will never hear about it, because the response to feeling ill on a website is to close it. One caution about how this gets explained. The usual account, that the eyes report movement the inner ear does not and the mismatch makes you ill, is the leading theory and it is genuinely contested. A rival explanation is built on postural instability instead. The effect is real and well documented. The mechanism is not settled, so it should not be stated as physiology.
What tends to break
Full-screen parallax, large transitions between pages, backgrounds that scale as you scroll, and video that starts on its own. Parallax is named outright in the guidance, which describes it as often non-essential, and that is usually the honest verdict on it.
Where this shows up on the site
Related terms
- Cognitive disabilityCognitive disability is a broad group of conditions affecting how people take information in, hold on to it, and act on it.
- OperableOperable is the second WCAG principle, and its one-line statement is that user interface components and navigation must be operable.
- DisabilityDisability results from the interaction between a health condition and the world around it.
- prefers-reduced-motionprefers-reduced-motion is a preference people set in their operating system or their browser, and it reaches your CSS as a media query and your JavaScript as a check you can read.
- CarouselA carousel is a set of panels shown one at a time in the same space, with previous and next controls and, more often than not, a timer.
Knowing the word is the easy part.
Find out where your own site stands. The free scan checks 10 pages in a real browser against all 90 supported automated rules, separates 27 best-practice checks from its WCAG findings, and names the rule behind every result.