Prefers reduced motion: animatie die iedereen kan gebruiken

Prefers reduced motion, in CSS geschreven als prefers-reduced-motion, is een mediakenmerk dat je website vertelt dat een bezoeker het apparaat heeft gevraagd niet-essentiële beweging te beperken. Meldt het reduce, dan hoor je de pagina tot rust te brengen: stop loops die automatisch afspelen, vervang schuiven, zoomen en parallax door zachte vervagingen of door niets, en toon stilstaande versies van geanimeerde achtergronden. Het is een kleine hoeveelheid werk die een site bruikbaar maakt voor mensen die hem anders onwel zouden verlaten.

Voor wie verminderde beweging is

Sommige mensen hebben een vestibulaire aandoening, die het binnenoor en het gevoel voor evenwicht en beweging in de hersenen treft. Bij hen kan grote beweging op het scherm, vooral parallax, zoomen en elementen die over grote vlakken schuiven, duizeligheid, misselijkheid, hoofdpijn of desoriëntatie uitlokken. Anderen vinden constante beweging afleidend, hebben migraine, of geven gewoon de voorkeur aan een rustiger scherm. Ze gebruiken allemaal dezelfde schakelaar in de instellingen van hun apparaat, en ze horen niet te hoeven uitleggen waarom.

Wat je vermindert, en wat kan blijven

Verminderde beweging is niet hetzelfde als geen beweging. Het doel is beweging weg te halen die een reis door de ruimte nabootst of grote delen van het scherm vult, en alles te stoppen wat vanzelf afspeelt. Kleine, snelle feedback en eenvoudige vervagingen zijn over het algemeen prima, en helpen mensen vaak te begrijpen wat er veranderde.

Vervang liever dan dat je verwijdert, waar het kan. Schuift een paneel normaal van de zijkant naar binnen, laat het dan invervagen. Speelt de hero een loop, toon dan een stilstaand frame ervan. Het ontwerp blijft intact; alleen de reis verdwijnt.

Zo respecteer je prefers-reduced-motion in CSS

De robuustste aanpak is beweging te behandelen als een verrijking. Schrijf eerst het stilstaande ontwerp en voeg dan beweging toe binnen een media query die alleen geldt wanneer de bezoeker geen voorkeur heeft. Wordt de query niet ondersteund of staat de instelling aan, dan staat de pagina gewoon stil. De pagina van MDN over prefers-reduced-motion documenteert het kenmerk.

/* Still by default */
.hero-bg {
  background: linear-gradient(135deg, #1e1b4b, #6d28d9 55%, #db2777);
  background-size: 100% 100%;
}
.card {
  opacity: 0;
  transition: opacity 200ms ease-out; /* a fade is fine for everyone */
}
.card.is-visible {
  opacity: 1;
}

/* Movement only for visitors with no preference */
@media (prefers-reduced-motion: no-preference) {
  .hero-bg {
    background-size: 200% 200%;
    animation: drift 20s linear infinite alternate;
  }
  .card {
    transform: translateY(24px);
    transition: opacity 200ms ease-out, transform 300ms cubic-bezier(0, 0, 0.2, 1);
  }
  .card.is-visible {
    transform: none;
  }
}

@keyframes drift {
  to { background-position: 100% 100%; }
}

Verminderde beweging in JavaScript, video en canvas

Beweging die door scripts wordt aangestuurd, zoals scrolleffecten, achtergronden in canvas of WebGL en video, heeft een controle in JavaScript nodig. Lees de instelling met matchMedia en luister naar wijzigingen, want mensen kunnen haar omzetten terwijl je pagina open staat.

const query = matchMedia('(prefers-reduced-motion: reduce)')
const video = document.querySelector('.hero-video')

function apply() {
  if (query.matches) {
    video?.pause()            // the poster image stays
    stopBackgroundLoop()      // your canvas or WebGL loop: draw one frame, then stop
  } else {
    video?.play().catch(() => {})
    startBackgroundLoop()
  }
}

query.addEventListener('change', apply)
apply()

Achtergrondvideo’s en live kleurverlopen zijn de vaakst voorkomende boosdoeners, omdat ze vanzelf afspelen. Video-achtergronden op websites en shader-kleurverlopen laten allebei zien waar de controle hoort.

Wat WCAG over beweging zegt

Drie succescriteria in de Web Content Accessibility Guidelines gaan over beweging. Ondersteuning voor verminderde beweging is de praktische manier om aan het eerste te voldoen; een pauzeknop regelt het tweede.

Stilstaande versies ontwerpen die er nog steeds goed uitzien

De stilstaande versie hoort niet als een kapotte versie te voelen. Kies voor geanimeerde achtergronden het frame dat er op zichzelf het best uitziet, niet het frame dat toevallig het eerste is. Zorg bij entrees dat de uiteindelijke layout ook zonder compleet is. Bij loops uit een merkmateriaal houdt een goed gekozen stilstaand beeld van hetzelfde materiaal de identiteit intact. Principes van motion design raadt om die reden aan elke animatie met één gepauzeerd frame te testen.

Gradiently volgt dezelfde regel: live Marks in de app staan stil wanneer je apparaat om verminderde beweging vraagt, en elk ontwerp dat je als loop exporteert, kun je ook als stilstaande PNG van dezelfde Mark exporteren, voor plekken waar beweging niet welkom is. Voor posts op social, waar je de instelling niet kunt detecteren, is trage, zachte beweging de vriendelijkste aanpak; zie geanimeerde achtergronden met kleurverloop.

1. 1

   Zet de instelling aan

   Schakel verminderde beweging in je besturingssysteem in en laad de site opnieuw.

2. 2

   Controleer alles wat beweegt

   Hero’s, carrousels, scrolleffecten, video’s, canvassen en laadstatussen horen allemaal rustig te zijn.

3. 3

   Zet haar om terwijl de pagina open staat

   Je scripts horen de wijziging te volgen zonder opnieuw laden.

4. 4

   Emuleer het in de ontwikkelaarstools

   Chrome en Firefox kunnen het mediakenmerk emuleren, en dat gaat sneller terwijl je werkt.

5. 5

   Bekijk het stilstaande ontwerp

   Zorg dat de verminderde versie bedoeld en compleet oogt, en niet alsof er iets niet is geladen.