Rörelsereducering

Rörelsereducering är en användarinställning, exponerad av alla moderna operativsystem, som anger att användaren inte vill ha animerat, parallax- eller på annat sätt rörelsetungt innehåll. Utvecklare detekterar inställningen via CSS-mediafrågan @media (prefers-reduced-motion: reduce).

Vilka behöver rörelsereducering

Flera grupper med funktionsnedsättning påverkas av rörelse på webben:

• Vestibulära störningar — yrsel, Ménières sjukdom och relaterade tillstånd kan utlösas eller förvärras av parallaxrullning, stora sidövergångar, helskärms-autoplay-video och vissa kamerarörelser. Svåra episoder kan vara invalidiserande.
• Migrän — många migrän­mönster utlöses av aura; rörelse är en av de dokumenterade triggerarna.
• Fotosensitiv epilepsi — blinkande innehåll som överstiger WCAG:s tröskel (mer än tre blixter per sekund) kan utlösa anfall. Inställningen för rörelsereducering signalerar att användaren vill att all rörelse tonas ned, även den som ligger under tröskeln.
• Koncentrationssvårigheter — ADHD och liknande tillstånd gör att bakgrundsrörelse (rullande markeringsremsor, eviga karuseller) utgör en betydande kognitiv belastning.

Det rör sig om en stor användargrupp. Olika undersökningar visar att den kombinerade prevalensen av vestibulära besvär, migrän och ADHD överstiger 20 % av vuxna vid någon tidpunkt i livet.

Vad operativsystemet gör

Alla större operativsystem exponerar en inställning för rörelsereducering i sina tillgänglighetsinställningar:

• macOS / iOS — Systeminställningar → Tillgänglighet → Skärm → Minska rörelse.
• Windows 10/11 — Inställningar → Tillgänglighet → Visuella effekter → Reglage för animationseffekter.
• Android — Inställningar → Tillgänglighet → Ta bort animationer.

Webbläsaren läser denna OS-inställning och exponerar den för CSS:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

WCAG-kriterier

Två WCAG-kriterier täcker specifikt rörelse:

• 2.3.3 Animering från interaktioner (AAA, WCAG 2.1+) — rörelse som utlöses av användarinteraktion kan inaktiveras, såvida inte rörelsen är nödvändig för funktionaliteten. Undantaget “nödvändig” är snävt: en CAPTCHA-timer är nödvändig; en scroll-utlöst kortflipp-animation är det inte.
• 2.2.2 Paus, stopp, dölj (A) — rörligt, blinkande eller automatiskt uppdaterat innehåll som varar mer än 5 sekunder måste ha ett sätt att pausas, stoppas eller döljas. Detta gäller oavsett användarinställning.

Vad du bör göra i praktiken

En rimlig grundnivå:

1. Detektera inställningen. Använd CSS-mediafrågan i varje stilmall som lägger till animering.
2. Reducera, eliminera inte. “Reducerad” behöver inte betyda “noll”; en 100 ms toningsövergång är vanligtvis acceptabel där en 600 ms inglid-animation inte är det.
3. Granska de värsta syndarna. Hero-parallax, musföljningseffekter, sidövergångsanimationer, oändliga rullister, autoplay-videor — dessa är de tunga fallen som behöver ett reducerat rörelse-alternativ.
4. Gör rörelsefri design till standard. Många designsystem börjar invertera grundinställningen: animering levereras bara när det uttryckligen aktiveras per komponent.