bevorzugt-reduzierte-Bewegung: Manchmal ist weniger Bewegung mehr

Die Medienabfrage „präferenzen mit reduzierter Bewegung“ erkennt, ob der Nutzer das Betriebssystem angefordert hat, um die Menge der verwendeten Animation oder Bewegung zu minimieren.

Nicht jeder mag dekorative Animationen oder Übergänge und einige Nutzer fühlen sich sofort krank, wenn sie mit Parallaxe-Scrolleffekten, Zoomeffekten usw. konfrontiert werden. Mit der Medienabfrage prefers-reduced-motion für Nutzereinstellungen können Sie eine bewegungsreduzierte Variante Ihrer Website für Nutzer entwerfen, die diese Präferenz geäußert haben.

Unterstützte Browser

  • 74
  • 79
  • 63
  • 10.1

Quelle

Zu viel Bewegung im echten Leben und im Web

Kürzlich ging ich mit meinen Kindern auf Eislaufen. Es war ein wundervoller Tag, die Sonne schien und die Eisbahn war voller Menschen ⛸. Das einzige Problem dabei war, dass ich nicht gut mit Menschenmengen zurecht kam. Bei so vielen beweglichen Zielen kann ich mich nicht auf irgendetwas fokussieren. Am Ende habe ich das Gefühl, komplett visuell überfordert zu sein, fast so, als würde ich auf einen Ameisenhülle starren 🐜.

Eine große Anzahl von Füßen auf dem Eislaufen.
Visuelle Überlastung im echten Leben

Gelegentlich kann das auch im Web passieren: Mit blinkenden Anzeigen, effektvollen Parallaxe-Effekten, überraschenden Animations- und automatisch wiedergegebenen Videos usw. kann das Web manchmal überwältigend sein... Anders als im echten Leben gibt es dafür eine Lösung. Mit der CSS-Medienabfrage prefers-reduced-motion können Entwickler eine Variante einer Seite für Nutzer erstellen, die weniger Bewegung bevorzugen. Das kann beispielsweise der Verzicht auf die automatische Wiedergabe von Videos, die Deaktivierung bestimmter rein dekorativer Effekte oder die vollständige Neugestaltung einer Seite für bestimmte Nutzer umfassen.

Bevor wir uns mit der Funktion beschäftigen, sehen wir uns einmal an, wofür Animationen im Web verwendet werden können. Wenn Sie möchten, können Sie die Hintergrundinformationen überspringen und direkt mit den technischen Details fortfahren.

Animation im Web

Animationen werden oft verwendet, um dem Nutzer Feedback zu geben, um ihn beispielsweise darüber zu informieren, dass eine Aktion empfangen wurde und verarbeitet wird. Auf einer Shopping-Website könnte ein Produkt beispielsweise animiert werden, um in einen virtuellen Einkaufswagen zu "fliegen", der als Symbol in der oberen rechten Ecke der Website dargestellt wird.

Ein weiterer Anwendungsfall beinhaltet die Nutzung von Bewegungen, um die Nutzerwahrnehmung zu hacken. Dazu wird eine Mischung aus Skeleton-Bildschirmen, kontextbezogenen Metadaten und Bildvorschauen von niedriger Qualität verwendet, um viel Zeit des Nutzers in Anspruch zu nehmen und dafür zu sorgen, dass sich die gesamte Nutzung schneller anfühlt. Die Idee dahinter ist, den Nutzern Kontext für die anstehenden Schritte zu liefern und gleichzeitig die Dinge so schnell wie möglich zu laden.

Schließlich gibt es noch dekorative Effekte wie animierte Farbverläufe, Parallaxe-Scrolleffekte, Hintergrundvideos und einige mehr. Solche Animationen werden vielen Nutzern gefallen, andere jedoch nicht, weil sie sich durch sie abgelenkt oder ausgebremst fühlen. Im schlimmsten Fall leiden die Nutzer unter Umständen sogar unter Bewegungskrankheit, als wäre es ein reales Erlebnis. Für diese Nutzer ist es also eine medizinische Notwendigkeit, die Animationen zu reduzieren.

Bewegungsgesteuerte vestibuläre Spektrum-Störung

Manche Nutzer werden von animierten Inhalten abgelenkt oder übel empfunden. Scroll-Animationen können beispielsweise vestibuläre Störungen verursachen, wenn sich andere Elemente als das mit dem Scrollen verbundene Hauptelement viel bewegen. Animationen mit Parallaxe-Scrollbewegungen können beispielsweise vestibuläre Störungen verursachen, da sich Hintergrundelemente mit einer anderen Geschwindigkeit bewegen als Vordergrundelemente. Reaktionen auf Vestibuläre (Innenohr)erkrankungen sind Schwindel, Übelkeit und Migräne. Zur Erholung ist manchmal eine Bettruhe erforderlich.

Bewegungen auf Betriebssystemen entfernen

Bei vielen Betriebssystemen gibt es schon seit Langem Einstellungen für Bedienungshilfen, mit denen eine Präferenz für eine reduzierte Bewegung festgelegt werden kann. Die folgenden Screenshots zeigen die Einstellung Bewegungen reduzieren von macOS Mojave und die Einstellung Animationen entfernen in Android Pie. Wenn diese Einstellungen aktiviert sind, verwendet das Betriebssystem keine dekorativen Effekte wie Animationen beim Starten von Apps. Auch die Anwendungen selbst können und sollten diese Einstellung berücksichtigen und alle unnötigen Animationen entfernen.

Screenshot des Bildschirms mit den macOS-Einstellungen, auf dem das Kästchen „Bewegungen reduzieren“ angeklickt ist.
Screenshot des Bildschirms mit den Android-Einstellungen, auf dem das Kästchen „Animationen entfernen“ angeklickt ist.

Bewegungssensoren im Web entfernen

Mit Medienabfragen Stufe 5 ist die Nutzerpräferenz für reduzierte Bewegung auch im Web verfügbar. Mit Medienabfragen können Autoren Werte oder Funktionen des User-Agents oder des Anzeigegeräts unabhängig vom gerenderten Dokument testen und abfragen. Mit der Medienabfrage prefers-reduced-motion wird ermittelt, ob der Nutzer eine Betriebssystemeinstellung festgelegt hat, um die Menge der verwendeten Animationen oder Bewegungen zu minimieren. Er kann zwei mögliche Werte annehmen:

  • no-preference: Gibt an, dass der Nutzer im zugrunde liegenden Betriebssystem keine Präferenz angegeben hat. Dieser Keyword-Wert wird im booleschen Kontext als false ausgewertet.
  • reduce: Gibt an, dass der Nutzer eine Betriebssystemeinstellung festgelegt hat, die angibt, dass Oberflächen Bewegungen oder Animationen minimieren sollen, vorzugsweise bis zu dem Punkt, an dem alle nicht wesentlichen Bewegungen entfernt werden.

Mit der Medienabfrage aus CSS- und JavaScript-Kontexten arbeiten

Wie bei allen Medienabfragen kann prefers-reduced-motion aus einem CSS-Kontext und einem JavaScript-Kontext geprüft werden.

Nehmen wir zur Veranschaulichung an, ich habe eine wichtige Anmeldeschaltfläche, auf die die Nutzenden klicken sollen. Ich könnte eine auffällige Vibrationsanimation definieren, aber als ein guter Webbürger spiele ich sie nur für Nutzer ab, denen Animationen ausdrücklich erlaubt sind, aber nicht für alle anderen. Das können Nutzer sein, die Animationen deaktiviert haben, oder Nutzer von Browsern, die die Medienabfrage nicht verstehen.

/*
  If the user has expressed their preference for
  reduced motion, then don't use animations on buttons.
*/
@media (prefers-reduced-motion: reduce) {
  button {
    animation: none;
  }
}

/*
  If the browser understands the media query and the user
  explicitly hasn't set a preference, then use animations on buttons.
*/
@media (prefers-reduced-motion: no-preference) {
  button {
    /* `vibrate` keyframes are defined elsewhere */
    animation: vibrate 0.3s linear infinite both;
  }
}

Zur Veranschaulichung der Arbeit mit prefers-reduced-motion mit JavaScript nehmen wir an, ich habe mit der Web Animations API eine komplexe Animation definiert. CSS-Regeln werden dynamisch vom Browser ausgelöst, wenn sich die Nutzereinstellung ändert. Bei JavaScript-Animationen muss ich jedoch selbst auf Änderungen warten und dann meine potenziell laufenden Animationen manuell stoppen (oder neu starten, wenn der Nutzer es erlaubt):

const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
mediaQuery.addEventListener('change', () => {
  console.log(mediaQuery.media, mediaQuery.matches);
  // Stop JavaScript-based animations.
});

Beachten Sie, dass die Klammern um die eigentliche Medienabfrage obligatorisch sind:

Don'ts
window.matchMedia('prefers-reduced-motion: reduce');
Das sollten Sie tun:
window.matchMedia('(prefers-reduced-motion: reduce)');

Mit der Medienabfrage aus <picture>-Kontexten arbeiten

Ein interessanter Anwendungsfall besteht darin, die Wiedergabe eines animierten AVIF-, WebP- oder GIF-Bilds vom Attribut media abhängig zu machen. Wenn (prefers-reduced-motion: no-preference) den Wert true ergibt, kann die animierte Version angezeigt werden. Andernfalls wird die statische Version angezeigt:

<picture>
  <!-- Animated versions. -->
  <source
    srcset="nyancat.avifs"
    type="image/avif"
    media="(prefers-reduced-motion: no-preference)"
  />
  <source
    srcset="nyancat.gif"
    type="image/gif"
    media="(prefers-reduced-motion: no-preference)"
  />
  <!-- Static versions. -->
  <img src="nyancat.png" alt="Nyan cat" width="250" height="250" />
</picture>

Unten sehen Sie ein Beispiel. Versuchen Sie, die Bewegungseinstellungen Ihres Geräts zu ändern, um den Unterschied zu sehen.

Nyan-Katze

Die Präferenzen des Nutzers zum Zeitpunkt der Anfrage ermitteln

Mit dem Clienthinweis-Header Sec-CH-Prefers-Reduced-Motion können Websites die Bewegungseinstellungen des Nutzers optional zum Zeitpunkt der Anfrage abrufen. So können Server aus Leistungsgründen das richtige CSS inline einfügen.

Demo

Ich habe eine kleine Demo erstellt, die auf Rogério Vicentes fantastischen 🐈 HTTP-Status-Katzen basiert. Nehmen Sie sich einen Moment Zeit, um den Witz zu schätzen. Er ist urkomisch und ich warte. Da Sie jetzt wieder zurück sind, möchte ich Ihnen die Demo vorstellen. Wenn Sie nach unten scrollen, wird jede HTTP-Statuskatze abwechselnd von rechts oder links angezeigt. Die Animation funktioniert mit 60 fps, aber wie oben beschrieben, kann es sein, dass einige Nutzer sie nicht mögen oder sich sogar überregen. Daher ist die Demo so programmiert, dass sie prefers-reduced-motion respektiert. Dies funktioniert sogar dynamisch, sodass Nutzer ihre Einstellungen spontan ändern können, ohne dass eine Aktualisierung erforderlich ist. Bevorzugt ein Nutzer eine geringere Bewegung, werden die unnötigen Enthüllungsanimationen nicht mehr angezeigt, sondern es bleibt nur noch die normale Scrollbewegung übrig. Der folgende Screencast zeigt die Demo in Aktion:

Video der prefers-reduced-motion-Demo

Ergebnisse

Bei modernen Websites ist es wichtig, die Nutzereinstellungen zu berücksichtigen. In Browsern werden immer mehr Funktionen zur Verfügung gestellt, um Webentwicklern dies zu ermöglichen. Ein weiteres bereits veröffentlichtes Beispiel ist prefers-color-scheme. Damit lässt sich erkennen, ob ein Nutzer ein helles oder dunkles Farbschema bevorzugt. Alles über prefers-color-scheme findest du in meinem Artikel Hallo Darkness, mein alter Freund 🌒.

Die Preisvergleichsportal-Arbeitsgruppe standardisiert derzeit mehr Medienabfragen von Nutzern wie prefers-reduced-transparency (ermittelt, ob der Nutzer reduzierte Transparenz bevorzugt), prefers-contrast (erkennt, ob der Nutzer das System aufgefordert hat, den Kontrast zwischen benachbarten Farben zu erhöhen oder zu verringern) und inverted-colors (erkennt, ob der Nutzer umgekehrte Farben bevorzugt).

(Bonus) Erzwingen reduzierter Bewegung auf allen Websites

Nicht jede Website nutzt prefers-reduced-motion, vielleicht aber nicht ausreichend. Falls Sie Motion auf allen Websites anhalten möchten, können Sie das auch tun. Eine Möglichkeit dafür besteht darin, ein Stylesheet mit dem folgenden CSS-Code in jede von Ihnen besuchte Webseite einzufügen. Es gibt mehrere Browsererweiterungen, die dies ermöglichen. Sie können auf eigenes Risiko verwendet werden.

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

Das funktioniert so: Der obige CSS-Code überschreibt die Dauer aller Animationen und die Übergänge so kurz, dass sie nicht mehr sichtbar sind. Da bei einigen Websites eine Animation ausgeführt werden muss, um richtig zu funktionieren (vielleicht hängt ein bestimmter Schritt von der Auslösung des animationend-Ereignisses ab), funktioniert der radikalere animation: none !important;-Ansatz nicht. Selbst der obige Hack wird nicht garantiert auf allen Websites erfolgreich sein. So kann er beispielsweise keine Bewegungen stoppen, die über die Web Animations API initiiert wurden. Deaktivieren Sie ihn daher, wenn Sie einen Fehler bemerken.

Danksagungen

Ein großes Dankeschön an Stephen McGruer, der prefers-reduced-motion in Chrome implementiert und – gemeinsam mit Rob Dodson – diesen Artikel gelesen hat. Hero-Image von Hannah Cauhepe auf Unsplash.