Reduceret bevægelse

Reduceret bevægelse er en brugerindstilling, der er tilgængelig i alle moderne operativsystemer, og som angiver, at brugeren ikke ønsker animeret, parallax- eller på anden måde bevægelsestungt indhold. Forfattere registrerer det via CSS-medieforespørgslen @media (prefers-reduced-motion: reduce).

Hvem har brug for reduceret bevægelse

Flere grupper af mennesker med handicap påvirkes af webbaseret bevægelse:

• Vestibulære forstyrrelser — svimmelhed, Ménières sygdom og lignende tilstande kan udløses eller forværres af parallax-scrolling, store sidetransitioner, fuld-skærms autoplay-video og visse kameraforetagsanimationer. Svære episoder kan være invaliderende.
• Migræneramte — mange migrænemønstre udløses af aura; bevægelse er en af de dokumenterede udløsere.
• Lysfølsom epilepsi — blinkende indhold over WCAG-grænsen (mere end tre blink i sekundet) kan udløse kramper. Indstillingen for reduceret bevægelse signalerer, at brugeren ønsker al bevægelse reduceret, selv den der ligger under grænsen.
• Koncentrationsbesvær — ADHD og lignende tilstande gør omgivende bevægelse (løbende tekst, evige karruseller) til en betydelig kognitiv belastning.

Dette er en stor brugergruppe. Forskellige undersøgelser angiver den samlede prævalens af vestibulære lidelser, migræne og ADHD til over 20 % af voksne på et eller andet tidspunkt i livet.

Hvad operativsystemet gør

Alle større operativsystemer tilbyder en indstilling for reduceret bevægelse i tilgængelighedsindstillingerne:

• macOS / iOS — Systemindstillinger → Tilgængelighed → Skærm → Reducer bevægelse.
• Windows 10/11 — Indstillinger → Tilgængelighed → Visuelle effekter → Til/fra for animationseffekter.
• Android — Indstillinger → Tilgængelighed → Fjern animationer.

Browseren læser denne OS-indstilling og eksponerer den for CSS:

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

WCAG-kriterier

To WCAG-kriterier dækker specifikt bevægelse:

• 2.3.3 Animation fra interaktioner (AAA, WCAG 2.1+) — bevægelse udløst af brugerinteraktion kan deaktiveres, medmindre bevægelsen er nødvendig for funktionaliteten. Undtagelsen „nødvendig“ er snæver: en CAPTCHA-timer er nødvendig; en scroll-udløst kortflip-animation er ikke.
• 2.2.2 Pause, stop, skjul (A) — alt bevægeligt, blinkende eller automatisk opdateret indhold, der varer mere end 5 sekunder, skal have mulighed for at blive sat på pause, stoppet eller skjult. Dette gælder uanset brugerindstilling.

Hvad man gør i praksis

Et rimeligt udgangspunkt:

1. Registrer indstillingen. Brug CSS-medieforespørgslen i alle stilark, der tilføjer animation.
2. Reducer, fjern ikke. „Reduceret“ behøver ikke betyde „nul“; en fade på 100 ms er som regel fin, hvor et 600 ms slide-in ikke er det.
3. Find overtræderne. Hero-parallax, mussporing, sidetransitionsanimationer, uendelige scrollere og autoplay-videoer er de tunge udfordringer, der kræver et reduceret-bevægelses-alternativ.
4. Standard: bevægelsesfri. Mange designsystemer begynder at vende standarden om: animation leveres kun, når det eksplicit er tilvalgt pr. komponent.