prefers-reduced-motion: patronen voor CSS, JavaScript en React | We.Inc
Detecteer de instelling voor minder beweging in CSS en JavaScript, zie uw eigen instelling live, en kopieer patronen die grote bewegingen vervangen door fades in plaats van animatie te schrappen.
prefers-reduced-motion respecteren
prefers-reduced-motion is een CSS media feature die laat weten of een bezoeker zijn apparaat om minder beweging heeft gevraagd. Er zijn twee waarden, no-preference en reduce. Zet grote bewegingen zoals parallax, zooms en slides in een query, en vervang ze bij de waarde reduce door een korte fade of helemaal geen animatie.
Mensen zetten minder beweging aan omdat schuiven, zoomen en parallax duizeligheid, misselijkheid of hoofdpijn kunnen veroorzaken, vooral bij mensen met evenwichtsstoornissen. De badge hieronder leest live de instelling van uw eigen apparaat, en de demo toont dezelfde animatie in volledige en verminderde vorm, zodat u kunt vergelijken voordat u een patroon kiest.
Bekijk de badge: die toont wat uw apparaat op dit moment doorgeeft en werkt bij als u de instelling wijzigt.
Gebruik de voorbeeldschakelaar om de verminderde versie van de demo te zien zonder uw systeeminstelling te wijzigen.
Kopieer het CSS-, JavaScript- of React-patroon dat past bij hoe uw site animeert.
Verminderen, niet verwijderen. Een snelle opacity-fade laat nog steeds zien dat er iets veranderde, zonder over het scherm te bewegen.
Schrijf beweging als verbetering: zet animaties binnen @media (prefers-reduced-motion: no-preference), zodat de veilige versie de standaard is.
Automatisch afspelende video's en carrousels hebben ook een pauzeknop nodig, wat de bewegingsinstelling ook zegt.
In Chrome DevTools kunt u de instelling emuleren via het Rendering-paneel, zodat u kunt testen zonder uw systeem te wijzigen.
Effecten die door scrollen worden gestart tellen ook mee. Grote parallax en scroll-jacking zijn de meest gehoorde klachten.
Veelgestelde vragen
Welke waarden heeft prefers-reduced-motion?
Twee: no-preference, wanneer de bezoeker niets heeft ingesteld, en reduce, wanneer die om minder beweging heeft gevraagd. Alleen @media (prefers-reduced-motion) schrijven is hetzelfde als vragen naar reduce.
Hoe controleer ik prefers-reduced-motion in JavaScript?
Roep window.matchMedia("(prefers-reduced-motion: reduce)") aan en lees de property matches. Voeg een change-event-listener toe aan het teruggegeven object om te reageren wanneer de instelling verandert terwijl de pagina open is.
Moet ik elke animatie uitzetten wanneer reduce is ingesteld?
Nee. Het verzoek is om minder beweging, niet om een bevroren pagina. Behoud kleurwisselingen, korte fades en voortgangsindicatoren, en verwijder of verklein bewegingen zoals schuiven, schalen, draaien en parallax.
Vereist WCAG dat u minder beweging respecteert?
WCAG 2.3.3 Animatie door interacties, niveau AAA, vraagt dat beweging die door interactie wordt gestart kan worden uitgezet, tenzij die essentieel is. De systeeminstelling respecteren is een van de genoemde manieren om eraan te voldoen. Daarnaast dekt 2.2.2 Pauzeren, stoppen, verbergen op niveau A beweging die vanzelf begint.
Hoe ga ik om met minder beweging in Tailwind?
Gebruik de motion-safe:-variant om een animatie alleen toe te passen wanneer er geen voorkeur is ingesteld, of motion-reduce: om er een te overschrijven wanneer reduce is ingesteld, bijvoorbeeld motion-safe:animate-bounce.
Welke beweging problemen veroorzaakt
Het probleem is beweging die een groot deel van het beeld vult of beweegt in een richting die de bezoeker niet zelf veroorzaakte: parallax-achtergronden, zooms over de hele pagina, schuivende paginawissels, draaiende elementen en inhoud die verspringt terwijl u scrolt.
Kleine, snelle feedback die de gebruiker zelf start, zoals een knop die van kleur verandert of een vinkje in een checkbox, is zelden een probleem en kan meestal blijven.
CSS met geen beweging als uitgangspunt
Veel sites voegen aan het einde een reduce-query toe die elke duur op bijna nul zet. Dat werkt, maar het is makkelijk om een animatie te missen, en sommige scripts luisteren naar animationend-events die dan meteen afgaan.
Door de beweging binnen een no-preference-query te schrijven, draait u de standaard om. Iedereen wiens browser geen voorkeur doorgeeft, krijgt nog steeds beweging, en alles wat u vergeet valt terug op de rustige versie.
Scripts en bibliotheken
CSS-queries bereiken geen animaties die vanuit JavaScript, canvas of smooth-scroll-aanroepen worden gestart. Controleer de media query voordat u element.animate() of scrollIntoView met behavior: smooth aanroept.
Lees de instelling één keer bij het starten en abonneer u op het change-event, zodat iemand die de instelling halverwege het bezoek omzet zonder herladen wordt gerespecteerd.
CSS-patronen
Beweging als verbetering
De kaart schuift alleen in beeld wanneer er geen voorkeur is ingesteld. Alle anderen zien een zachte fade.
Een vangnet voor bestaande sites
Handig wanneer u niet elke animatie kunt herschrijven. Duren worden bijna nul in plaats van none, zodat animationend- en transitionend-events nog steeds afgaan.
JavaScript en React
De instelling lezen en wijzigingen volgen
matchMedia geeft een live lijst terug. Het change-event gaat af wanneer de bezoeker de instelling omzet.
React-hook: usePrefersReducedMotion
Begint op de server op true, zodat er niets animeert voordat de browser heeft geantwoord.
Waardoor u elk effect vervangt
Verminderde alternatieven
Volledige beweging
Verminderde versie
Parallax-achtergrond
Statische achtergrond
Paginawissel met slide of zoom
Cross-fade, of een directe wissel
Element vliegt binnen bij scrollen
Korte fade op zijn plek
Draaiende loader
Pulserende opacity of een voortgangsbalk
Smooth scroll naar anker
Directe sprong
Automatisch afspelende achtergrondvideo
Posterafbeelding met een afspeelknop
Uw bewegingsinstelling
De badge leest de instelling van uw apparaat met matchMedia, en de voorbeeldschakelaar toont de verminderde animatie zonder uw systeem te wijzigen.
Voorbeeldmodus
Mijn instelling volgen
Voorbeeld volledige beweging
Voorbeeld verminderd
Opnieuw afspelen
Verminderd: een korte fade op zijn plek.
Volledige beweging: het paneel vliegt, draait en groeit.