Animation fra interaktioner

Hvad kriteriet kræver

Bevægelsesanimationer udløst af brugerinteraktion — parallax-scroll, sidetransitioner, hover-zoomeffekter, scroll-drevne afsløringer — skal deaktiveres, når brugeren beder om reduceret bevægelse, medmindre animationen er uundværlig for den funktion eller information, der formidles.

Standardmekanismen er CSS-medieforespørgslen prefers-reduced-motion: reduce, som afspejler OS-niveauets indstilling for reduceret bevægelse, som macOS, Windows, iOS og Android alle stiller til rådighed.

Sådan opfylder du det

• Indpak alle betydningsfulde bevægelser (transformationer, store forskydninger, parallax, sidetransitioner, scroll-linkede animationer) i @media (prefers-reduced-motion: no-preference).
• Til JavaScript-drevne animationer (GSAP, Framer Motion, Lottie) skal du kontrollere window.matchMedia('(prefers-reduced-motion: reduce)').matches og enten springe animationen over eller erstatte den med en øjeblikkelig tilstandsændring.
• Tillad kritiske feedbackanimationer (indlæsningsspinnere, trækforhåndsvisninger) at fortsætte med lavere amplitude, når reduceret bevægelse er aktiveret — de formidler funktion, ikke udsmykning.
• Test med macOS Systemindstillinger → Tilgængelighed → Skærm → Reducér bevægelse aktiveret, samt de tilsvarende indstillinger på Windows, iOS og Android.

Typiske fejl

• Markedsføringssider med parallax-scrolling, der ignorerer OS-indstillingen for reduceret bevægelse.
• Sidetransitionsbiblioteker (Barba.js, Astros view transitions i ældre konfigurationer), der animerer store forskydninger uanset brugerens præference.
• Kortsvæveeffekter med lange translateY-transitioner, der giver ubehag for brugere med vestibulære lidelser.
• Scroll-udløste animationer på lange sider, der afspiller snesevis af bevægelseseffekter, mens brugeren scroller — særligt desorienterende i stor skala.
• Lottie-animationer i onboarding-flows, der afspiller fuldskærmsbevægelse uden at tjekke præferencen.

axe og Lighthouse flagger ikke prefers-reduced-motion-fejl pålideligt, men Lighthhouses tilgængelighedsaudit indeholder et prefers-reduced-motion-tjek i nyere versioner, og mange design-system-linters håndhæver det nu.

Hvorfor det er vigtigt

Vestibulære lidelser — Ménières sygdom, vestibulær migræne, post-commotio-syndrom, vedvarende posturalt-perceptuelt svimmelhedssyndrom — kan forværres af store eller uventede bevægelser på skærmen. Resultatet er reel, fysisk kvalme eller svimmelhed, ikke blot ubehag. At respektere prefers-reduced-motion er en af de billigste tilgængelighedsforbedringer med størst effekt, og OS-niveauets indstilling betyder, at brugeren allerede har fortalt dig, hvad vedkommende har brug for.