prefers-reduced-motion: Muster für CSS, JavaScript und React | We.Inc
Erkenne die Einstellung für reduzierte Bewegung in CSS und JavaScript, sieh deine eigene Einstellung live und kopiere Muster, die große Bewegungen durch Fades ersetzen, statt Animationen zu löschen.
prefers-reduced-motion richtig berücksichtigen
prefers-reduced-motion ist ein CSS-Media-Feature, das meldet, ob ein Besucher sein Gerät um weniger Bewegung gebeten hat. Es hat zwei Werte, no-preference und reduce. Pack große Bewegungen wie Parallax, Zooms und Slides in eine Query und ersetze sie beim Wert reduce durch einen kurzen Fade oder gar keine Animation.
about:config, ui.prefersReducedMotion auf 1 setzen
Menschen aktivieren reduzierte Bewegung, weil Gleiten, Zoomen und Parallax Schwindel, Übelkeit oder Kopfschmerzen auslösen können, besonders bei Gleichgewichtsstörungen. Das Abzeichen unten liest die Einstellung deines Geräts live aus, und die Demo zeigt dieselbe Animation in voller und reduzierter Form, damit du vergleichen kannst, bevor du ein Muster wählst.
Sieh dir das Abzeichen an: Es zeigt, was dein Gerät gerade meldet, und aktualisiert sich, wenn du die Einstellung änderst.
Nutze den Vorschau-Schalter, um die reduzierte Version der Demo zu sehen, ohne deine Systemeinstellung zu ändern.
Kopiere das CSS-, JavaScript- oder React-Muster, das zur Art passt, wie deine Website animiert.
Reduzieren, nicht entfernen. Ein kurzer Opacity-Fade zeigt trotzdem, dass sich etwas geändert hat, ohne über den Bildschirm zu fliegen.
Schreib Bewegung als Erweiterung: Setz Animationen in @media (prefers-reduced-motion: no-preference), damit die sichere Version der Standard ist.
Automatisch abspielende Videos und Karussells brauchen zusätzlich eine Pause-Steuerung, egal was die Bewegungseinstellung sagt.
In den Chrome DevTools kannst du die Einstellung im Rendering-Panel emulieren, um ohne Änderung deines Systems zu testen.
Scroll-ausgelöste Effekte zählen auch. Großes Parallax und Scroll-Jacking sind die häufigsten Beschwerden.
Häufige Fragen
Welche Werte hat prefers-reduced-motion?
Zwei: no-preference, wenn der Besucher nichts eingestellt hat, und reduce, wenn er um weniger Bewegung gebeten hat. @media (prefers-reduced-motion) allein zu schreiben ist dasselbe wie eine Abfrage auf reduce.
Wie prüfe ich prefers-reduced-motion in JavaScript?
Ruf window.matchMedia("(prefers-reduced-motion: reduce)") auf und lies die Eigenschaft matches. Häng an das zurückgegebene Objekt einen change-Event-Listener, um zu reagieren, wenn sich die Einstellung ändert, während die Seite geöffnet ist.
Sollte ich bei reduce jede Animation abschalten?
Nein. Gewünscht ist weniger Bewegung, keine eingefrorene Seite. Behalte Farbwechsel, kurze Fades und Fortschrittsanzeigen und entferne oder verkleinere Bewegungen wie Gleiten, Skalieren, Drehen und Parallax.
Verlangt die WCAG, reduzierte Bewegung zu berücksichtigen?
WCAG 2.3.3 Animation durch Interaktionen, Stufe AAA, verlangt, dass durch Interaktion ausgelöste Bewegung abgeschaltet werden kann, sofern sie nicht wesentlich ist. Die Systemeinstellung zu berücksichtigen ist einer der genannten Wege, das zu erfüllen. Unabhängig davon deckt 2.2.2 Pausieren, Stoppen, Ausblenden auf Stufe A Bewegung ab, die von selbst startet.
Wie gehe ich in Tailwind mit reduzierter Bewegung um?
Nutze die Variante motion-safe:, um eine Animation nur anzuwenden, wenn keine Präferenz gesetzt ist, oder motion-reduce:, um eine zu überschreiben, wenn reduce gesetzt ist, zum Beispiel motion-safe:animate-bounce.
Welche Bewegung Probleme macht
Problematisch ist Bewegung, die einen großen Teil der Ansicht füllt oder sich in eine Richtung bewegt, die der Besucher nicht ausgelöst hat: Parallax-Hintergründe, ganzseitige Zooms, gleitende Seitenwechsel, sich drehende Elemente und Inhalte, die beim Scrollen springen.
Kleines, schnelles, vom Nutzer ausgelöstes Feedback, etwa ein Farbwechsel am Button oder ein Häkchen in einer Checkbox, ist selten ein Problem und kann meist bleiben.
CSS, das ohne Bewegung beginnt
Viele Websites hängen am Ende eine reduce-Query an, die jede Dauer auf fast null setzt. Das funktioniert, aber man übersieht leicht eine Animation, und manche Skripte warten auf animationend-Events, die dann sofort feuern.
Wenn du die Bewegung in eine no-preference-Query schreibst, kehrt sich der Standard um. Wessen Browser keine Präferenz meldet, bekommt trotzdem Bewegung, und alles, was du vergisst, fällt auf die ruhige Version zurück.
Skripte und Bibliotheken
CSS-Queries erreichen keine Animationen, die aus JavaScript, Canvas oder Smooth-Scrolling-Aufrufen starten. Prüfe die Media Query, bevor du element.animate() oder scrollIntoView mit behavior: smooth aufrufst.
Lies die Einstellung einmal beim Start aus und abonniere ihr change-Event, damit eine Person, die sie während des Besuchs umschaltet, ohne Neuladen berücksichtigt wird.
CSS-Muster
Bewegung als Erweiterung
Die Karte gleitet nur herein, wenn keine Präferenz gesetzt ist. Alle anderen sehen einen sanften Fade.
Ein Sicherheitsnetz für bestehende Websites
Nützlich, wenn du nicht jede Animation umschreiben kannst. Die Dauern werden fast null statt none, sodass animationend- und transitionend-Events weiterhin feuern.
JavaScript und React
Einstellung auslesen und Änderungen folgen
matchMedia gibt eine Live-Liste zurück. Ihr change-Event feuert, wenn der Besucher die Einstellung umschaltet.
React-Hook: usePrefersReducedMotion
Startet auf dem Server mit true, damit nichts animiert, bevor der Browser geantwortet hat.
Wodurch du welchen Effekt ersetzt
Reduzierte Alternativen
Volle Bewegung
Reduzierte Version
Parallax-Hintergrund
Statischer Hintergrund
Seitenwechsel mit Slide oder Zoom
Überblendung oder sofortiger Wechsel
Element fliegt beim Scrollen herein
Kurzer Fade an Ort und Stelle
Drehender Ladeindikator
Pulsierende Opacity oder ein Fortschrittsbalken
Smooth Scroll zum Anker
Sofortiger Sprung
Automatisch abspielendes Hintergrundvideo
Vorschaubild mit Play-Button
Deine Bewegungseinstellung
Das Abzeichen liest deine Geräteeinstellung mit matchMedia aus, und der Vorschau-Schalter zeigt die reduzierte Animation, ohne dein System zu ändern.
Vorschaumodus
Meiner Einstellung folgen
Volle Bewegung ansehen
Reduziert ansehen
Erneut abspielen
Reduziert: ein kurzer Fade an Ort und Stelle.
Volle Bewegung: Das Panel fliegt, dreht sich und wächst.