Animering från interaktioner

Vad kriteriet kräver

Rörelseanimationer som utlöses av användarinteraktion — parallaxscroll, sidövergångar, hover-zoomningar, scroll-drivna avslöjandeeffekter — måste inaktiveras när användaren begär reducerad rörelse, såvida animationen inte är nödvändig för den funktion eller information som förmedlas.

Standardmekanismen är CSS-mediafrågan prefers-reduced-motion: reduce, som speglar den systemövergripande inställningen för reducerad rörelse som macOS, Windows, iOS och Android alla exponerar.

Hur du uppfyller det

• Omge alla meningsfulla rörelser (transformationer, stora förflyttningar, parallax, sidövergångar, scroll-kopplade animationer) med @media (prefers-reduced-motion: no-preference).
• För JavaScript-drivna animationer (GSAP, Framer Motion, Lottie) kontrollerar du window.matchMedia('(prefers-reduced-motion: reduce)').matches och hoppar antingen över animationen eller ersätter den med en omedelbar tillståndsändring.
• Låt kritiska feedbackanimationer (inläsningsspinnrar, drag-förhandsvisningar) fortsätta med subtilare amplitud när reducerad rörelse är aktiverad — de förmedlar funktion, inte utsmyckning.
• Testa med macOS Systeminställningar → Tillgänglighet → Display → Reducera rörelse aktiverat, samt motsvarigheterna på Windows, iOS och Android.

Vanliga fel

• Marknadsföringssidor med parallaxscrollning som ignorerar operativsystemets inställning för reducerad rörelse.
• Sidövergångsbibliotek (Barba.js, Astros vy-övergångar i äldre konfigurationer) som animerar stora förflyttningar oavsett användarpreferens.
• Hover-lyfteffekter på kort med långa translateY-övergångar som orsakar obehag för användare med vestibulära besvär.
• Scroll-utlösta animationer på långa sidor som avfyrar dussintals rörelseeffekter när användaren scrollar — särskilt desorienterade i stor skala.
• Lottie-animationer i introduktionsflöden som spelar upp helskärmsrörelser utan att kontrollera inställningen.

axe och Lighthouse flaggar inte alltid fel för reducerad rörelse, men Lighthouses tillgänglighetsrevision inkluderar en prefers-reduced-motion-kontroll i nyare versioner, och många design-systemlinters tillämpar det nu.

Varför det spelar roll

Vestibulära störningar — Ménières sjukdom, vestibulär migrän, syndrom efter hjärnskakning, persisterande postural-perceptuell yrsel — kan förvärras av stora eller oväntade rörelser på skärmen. Resultatet är verkligt, fysiskt illamående eller yrsel, inte bara obehag. Att respektera prefers-reduced-motion är en av de billigaste tillgänglighetsförbättringarna med störst effekt, och systeminställningen innebär att användaren redan har berättat vad de behöver.