This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung
Accessibility
How do animations turn off when operated?
Parallax effects when scrolling, elements that fly up when clicking, pages that rotate when switching: For people with vestibular disorders, such movements trigger dizziness, nausea, and headache. Criterion 2.3.3 of Level AAA requires that animations triggered by an operation be switched off unless the animation is essential to the function or information.
What the Criterion Requires
Any movement that occurs as a result of an operation (scrolling, clicking, typing, swiping) can be switched off without the function being lost. A gentle scroll to the anchor becomes a jump, a leading menu appears immediately, a parallax background stands still. Essential animations are excluded: a progress indicator showing a sequence or a simulation whose content is movement.
The implementation via the system setting
Operating systems have a “reduce movement” setting, which the browser passes on as a media query prefers-reduced-motion. A stylesheet that sets all transitions and animations to zero under this query meets the criterion for everything that is animated via CSS. For JavaScript animations, the same query is evaluated before starting. A separate switch on the page is a supplement for people who do not know the system setting.
This is how we deal with it
The measurement can check whether the stylesheet contains a rule for prefers-reduced-motion and whether animations end under it; If JavaScript animations listen to it, a reviewer will see when operating with the setting on. The criterion belongs to the category AAA in knowledge.
Examples
Parallax without shutdown
.held { background-attachment: fixed; }
.karte { transition: transform 0.6s; }
.karte:hover { transform: translateY(-20px) rotate(2deg); }@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.held { background-attachment: scroll; }
}The system setting “Reduce movement” turns off all movements that are not necessary for the function.
- Add a block for prefers-reduced-motion to the stylesheet that sets transitions and animations to 0.01 ms duration and scroll-behavior to auto.
- Evaluate the query in JavaScript (matchMedia) and start parallax and flight effects only if movement is allowed.
- Test with the system setup on: Nothing is allowed to glide, fly or rotate anymore.
- Offer a visible “Movement off” button that saves the choice in the browser.
