Verminderde beweging

Verminderde beweging is een gebruikersvoorkeur die door elk modern besturingssysteem wordt blootgesteld. Het geeft aan dat de gebruiker geen geanimeerde, parallax- of anderszins bewegingszware inhoud wil. Auteurs detecteren dit via de CSS-mediaquery @media (prefers-reduced-motion: reduce).

Wie verminderde beweging nodig heeft

Verschillende groepen mensen met een beperking worden geraakt door beweging op het web:

• Vestibulairstoornissen — duizeligheid, de ziekte van Ménière en aanverwante aandoeningen kunnen worden veroorzaakt of verergerd door parallaxscrollen, grote paginaovergangen, autoplay-video op volledig scherm en bepaalde camera-pananimaties. Ernstige aanvallen kunnen verlammend zijn.
• Migrainepatïenten — veel migratiepatronen worden door aura getriggerd; beweging is een van de gedocumenteerde triggers.
• Fotosensitieve epilepsie — knipperend inhoud boven de WCAG-drempel (meer dan drie flitsen per seconde) kan aanvallen veroorzaken. De voorkeur voor verminderde beweging signaleert dat de gebruiker alle beweging wil terugdringen, ook de soorten die onder de drempel vallen.
• Concentratiestoornissen — ADHD en aanverwante aandoeningen maken omgevingsbeweging (scrollende banners, ononderbroken carrousels) tot een aanzienlijke cognitieve last.

Dit is een grote gebruikerspopulatie. Diverse onderzoeken schatten de gecombineerde prevalentie van vestibulairstoornissen, migraine en ADHD op meer dan 20 % van de volwassenen op enig moment in hun leven.

Wat het besturingssysteem doet

Alle belangrijke besturingssystemen bieden een voorkeur voor verminderde beweging in hun toegankelijkheidsinstellingen:

• macOS / iOS — Systeeminstellingen → Toegankelijkheid → Weergave → Verminder beweging.
• Windows 10/11 — Instellingen → Toegankelijkheid → Visuele effecten → Schakelaar animatie-effecten.
• Android — Instellingen → Toegankelijkheid → Animaties verwijderen.

De browser leest deze OS-voorkeur en geeft deze door aan CSS:

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

WCAG-criteria

Twee WCAG-criteria behandelen specifiek beweging:

• 2.3.3 Animatie vanuit interacties (AAA, WCAG 2.1+) — beweging die wordt geactiveerd door gebruikersinteractie kan worden uitgeschakeld, tenzij de beweging essentieel is voor de functionaliteit. De uitzondering voor „essentieel“ is beperkt: een CAPTCHA-timer is essentieel; een scroll-geactiveerde kaartflip-animatie niet.
• 2.2.2 Pauzeren, stoppen, verbergen (A) — bewegende, knipperende of automatisch bijgewerkte inhoud die langer dan 5 seconden duurt, moet een manier bieden om te pauzeren, te stoppen of te verbergen. Dit geldt ongeacht de gebruikersvoorkeur.

Wat operationeel te doen

Een redelijke basislijn:

1. Detecteer de voorkeur. Gebruik de CSS-mediaquery in elk stylesheet dat animaties toevoegt.
2. Verminder, elimineer niet. „Verminderd“ hoeft niet „nul“ te betekenen; een fade van 100 ms is meestal acceptabel waar een slide-in van 600 ms dat niet is.
3. Controleer de overtreders. Hero-parallax, muistraceereffecten, paginaovergangsanimaties, oneindige scrollers, autoplay-video’s — dit zijn de zware gevallen die een verminderde-bewegingsfallback nodig hebben.
4. Standaard licht in beweging. Veel ontwerpsystemen beginnen de standaard om te keren: animatie wordt alleen geactiveerd wanneer dit per component uitdrukkelijk wordt gekozen.