Minder beweging: de instelling ‘reduced motion’ respecteren

Iemand opent uw site op de telefoon. Bij het scrollen schuift de achtergrond langzamer dan de voorgrond, blokken vliegen van links en rechts het scherm in, en de kop zoomt een beetje in. Mooi gemaakt. Maar deze bezoeker heeft een evenwichtsstoornis en moet na een paar seconden het scherm wegleggen omdat de kamer begint te draaien. Op haar telefoon staat “Beperk beweging” al aan. Uw site weet dat, als u hem ernaar laat kijken. Dat is waar reduced motion om draait: een instelling die de bezoeker zelf kiest, en die u met een paar regels code kunt respecteren.

Waarom beweging een probleem kan zijn

Bij mensen met een vestibulaire aandoening, een stoornis in het evenwichtsorgaan, kan beweging op een scherm klachten veroorzaken: duizeligheid, misselijkheid, hoofdpijn. Ook na een hersenschudding, bij migraine en bij sommige vormen van ADHD of autisme kan veel beweging belastend zijn of de aandacht wegtrekken.

Het gaat dan niet om een fade-in van een halve seconde. De grootste boosdoeners zijn:

• Parallax-effecten, waarbij lagen met verschillende snelheden bewegen tijdens het scrollen.
• Grote elementen die het beeld in schuiven, draaien of zoomen.
• Scrollgestuurde animaties, waarbij de pagina meebeweegt met het scrollen.
• Achtergrondvideo’s die automatisch afspelen.
• Soepel scrollen over lange afstanden, bijvoorbeeld bij een klik op een ankerlink.

Over animaties in het algemeen, ook vanuit ontwerp en snelheid bekeken, schreven we eerder animaties op uw website: wanneer wel en wanneer niet.

Waar de bezoeker het instelt

De instelling zit in elk groot besturingssysteem, alleen heet ze steeds anders:

Systeem	Waar te vinden (ongeveer)
iPhone en iPad	Instellingen, Toegankelijkheid, Beweging, “Beperk beweging”
macOS	Systeeminstellingen, Toegankelijkheid, Weergave, “Beperk beweging”
Windows	Instellingen, Toegankelijkheid, Visuele effecten, “Animatie-effecten” uit
Android	Instellingen, Toegankelijkheid, “Animaties verwijderen” (naam verschilt per merk)

De browser geeft deze voorkeur door aan websites via de mediaquery prefers-reduced-motion. Alle moderne browsers ondersteunen dat.

Zo gebruikt u prefers-reduced-motion

De eenvoudige, brede aanpak

Een veelgebruikte basisregel zet bij deze voorkeur vrijwel alle animaties en overgangen uit:

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

De animaties worden niet verwijderd maar zo kort gemaakt dat ze direct klaar zijn. Daardoor blijven onderdelen die op het einde van een animatie wachten, gewoon werken. Voor de meeste WordPress-sites is dit een goede eerste stap, toe te voegen via het veld voor extra CSS of in een childthema.

De nette aanpak: beweging als extraatje

Nog beter is het om andersom te denken. Zet beweging alleen aan voor wie er geen bezwaar tegen heeft:

.blok { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .blok { animation: inschuiven 0.6s ease-out; }
}

Zo is de rustige versie de standaard en krijgt alleen wie niets heeft ingesteld de animatie.

JavaScript-animaties

Animaties die met JavaScript worden gestuurd, zoals scrolleffecten en sliders, lezen de CSS-regel niet. Die moet het script zelf controleren:

const rustig = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!rustig) {
  startParallax();
}

Veel animatiebibliotheken en sommige page builders hebben hier een eigen instelling voor. Kijk in de opties of zoek in de documentatie naar “reduced motion”.

Page builders en thema’s

In WordPress komt veel beweging niet uit uw eigen code, maar uit instellingen van het thema of de page builder. Denk aan “ingangsanimaties” per blok in Elementor of Divi, een parallax-optie bij een sectie met achtergrondafbeelding, of een thema met standaard soepel scrollen. Loop die instellingen langs. Vaak is het het eenvoudigst om zulke effecten helemaal uit te zetten op plekken waar ze niets toevoegen. Waar u ze wilt houden, helpt de brede CSS-regel hierboven, al vangt die niet alles wat via JavaScript loopt.

Ook zonder instelling: een stopknop

Niet iedereen die last heeft van beweging, weet dat de instelling bestaat. Een site met veel bewegende onderdelen doet er daarom goed aan om ook zelf een knop aan te bieden, bijvoorbeeld “Animaties stoppen” bovenaan of in de footer, die dezelfde rustige weergave inschakelt en de keuze onthoudt.

Minder beweging is niet geen beweging

Het doel is niet om elke verandering op de pagina te schrappen. Een knop die van kleur verandert bij aanwijzen, een uitklapblok dat opent, een korte fade: dat zijn geen problemen. Het gaat om grote, onverwachte of langdurige beweging.

Een paar richtlijnen:

• Vervang, verwijder niet altijd. Een blok dat inschuift, kan in plaats daarvan rustig verschijnen.
• Achtergrondvideo: start niet automatisch, of toon een stilstaand beeld met een afspeelknop.
• Parallax: zet uit, de afbeelding staat gewoon stil.
• Sliders: geen autoplay bij deze voorkeur. Meer daarover in sliders en carrousels toegankelijk maken.
• Soepel scrollen: spring direct naar het doel.

Wat WCAG erover zegt

Het criterium dat het meest direct over animaties bij interactie gaat, is 2.3.3 “animatie bij interacties”. Dat hoort bij niveau AAA, dus niet bij de AA-eisen die meestal gelden. Toch is het verstandig om het te volgen: de moeite is klein en de winst voor de mensen die het nodig hebben groot. Daarnaast vraagt criterium 2.2.2 op niveau A dat automatisch bewegende inhoud die langer dan vijf seconden duurt, te pauzeren of te stoppen is. Voor flitsende beelden gelden nog strengere regels, omdat die een epileptische aanval kunnen uitlokken; dat leest u in flitsende beelden en epilepsie.

Testen op uw eigen site

1. Zet “Beperk beweging” aan op uw telefoon of computer.
2. Open uw site en scrol door de homepage en een paar andere pagina’s.
3. Beweegt er nog iets groots? Parallax, inschuivende blokken, een draaiende slider, een achtergrondvideo?
4. U kunt de instelling ook nabootsen in Chrome: ontwikkelaarstools, menu Rendering, “Emulate CSS media feature prefers-reduced-motion”.

Blijft er beweging over die uit een plugin of thema komt, dan is dat vaak met een kleine aanpassing op te lossen. Lukt dat niet zelf, dan hoort het bij het herstellen van toegankelijkheidsproblemen. Het complete overzicht van wat een toegankelijke site vraagt, staat op website toegankelijk maken.