Animatie door interacties

Wat het vereist

Bewegingsanimaties die door gebruikersinteractie worden geactiveerd — parallax-scrollen, paginaovergangen, bij hover gestarte vergrotingen, scroll-gestuurde onthuleffecten — moeten worden uitgeschakeld wanneer de gebruiker minder beweging aanvraagt, tenzij de animatie essentieel is voor de functie of de overgebrachte informatie.

Het standaardmechanisme is de CSS-mediaquery prefers-reduced-motion: reduce, die de instelling voor verminderde beweging op OS-niveau oppervlakt, zoals macOS, Windows, iOS en Android die allemaal bieden.

Hoe te voldoen

• Wikkel betekenisvolle beweging (transformaties, grote verplaatsingen, parallax, paginaovergangen, scroll-gekoppelde animaties) in @media (prefers-reduced-motion: no-preference).
• Controleer bij JavaScript-gestuurde animaties (GSAP, Framer Motion, Lottie) via window.matchMedia('(prefers-reduced-motion: reduce)').matches en sla de animatie over of vervang deze door een directe toestandswijziging.
• Sta toe dat kritieke feedbackanimaties (laadspinners, sleepvoorbeelden) op een subtielere amplitude doorgaan wanneer verminderde beweging is ingeschakeld — zij geven functie aan, geen franje.
• Test met macOS Systeeminstellingen → Toegankelijkheid → Weergave → Verminder beweging ingeschakeld, en de equivalenten op Windows, iOS en Android.

Veelvoorkomende fouten

• Marketingpagina’s met parallax-scrollen die de OS-voorkeur voor verminderde beweging negeren.
• Bibliotheken voor paginaovergangen (Barba.js, Astro-weergaveovergangen in oudere configuraties) die grote verplaatsingen animeren ongeacht de gebruikersvoorkeur.
• Card-hover-lifteffecten met lange translateY-overgangen die ongemak veroorzaken bij gebruikers met vestibulaireproblematiek.
• Scroll-gestuurde animaties op lange pagina’s die tientallen bewegingseffecten activeren terwijl de gebruiker scrolt — met name desoriënterend op schaal.
• Lottie-animaties in onboardingflows die fullscreen-beweging afspelen zonder de voorkeur te controleren.

axe en Lighthouse signaleren fouten met betrekking tot verminderde beweging niet betrouwbaar, maar de toegankelijkheidsaudit van Lighthouse bevat in nieuwere versies wel een controle voor prefers-reduced-motion, en veel design-system-linters dwingen dit nu af.

Waarom dit belangrijk is

Vestibulaireproblematiek — de ziekte van Ménière, vestibulairmigraine, post-commotiesyndroom, aanhoudende posturaal-perceptuele duizeligheid — kan worden verergerd door grote of onverwachte beweging op het scherm. Het gevolg is echte, fysieke misselijkheid of duizeligheid, niet slechts ongemak. Het respecteren van prefers-reduced-motion is een van de goedkoopste en meest impactvolle verbeteringen op het gebied van toegankelijkheid die beschikbaar zijn, en de instelling op OS-niveau betekent dat de gebruiker al heeft aangegeven wat nodig is.