bevorzugt-reduzierte-Bewegung: Manchmal ist weniger Bewegung mehr

Mit der Mediaabfrage „prefers-reduced-motion“ wird ermittelt, ob der Nutzer das Betriebssystem gebeten hat, die Anzahl der verwendeten Animationen oder Bewegungen zu minimieren.

Thomas Steiner

Nicht jeder mag dekorative Animationen oder Übergänge und einige Nutzer leiden sogar unter Bewegungskrankheit, wenn sie beispielsweise mit Parallax-Scrolling oder Zoomeffekten konfrontiert werden. Mit der Medienabfrage für Nutzereinstellungen prefers-reduced-motion können Sie eine Variante Ihrer Website mit reduzierter Bewegung für Nutzer entwerfen, die diese Einstellung angegeben haben.

Zu viel Bewegung in der realen Welt und im Web

Neulich war ich mit meinen Kindern Schlittschuhlaufen. Es war ein schöner Tag, die Sonne schien und die Eisbahn war voll mit Menschen ⛸. Das einzige Problem dabei: Ich kann mit Menschenmassen nicht gut umgehen. Bei so vielen sich bewegenden Zielen kann ich mich nicht auf etwas konzentrieren und verliere den Überblick. Ich habe das Gefühl, dass ich in einen Ameisenhügel 🐜 starre.

Gelegentlich kann das auch im Web passieren: Mit blinkenden Anzeigen, ausgefallenen Parallax-Effekten, überraschenden Enthüllungsanimationen, automatisch abgespielten Videos und mehr kann das Web manchmal ziemlich überwältigend sein. Glücklicherweise gibt es im Gegensatz zum echten Leben eine Lösung dafür. Mit der CSS-Medienabfrage prefers-reduced-motion können Entwickler eine Variante einer Seite für Nutzer erstellen, die weniger Bewegung bevorzugen. Das kann von der Vermeidung von automatisch abgespielten Videos über das Deaktivieren bestimmter rein dekorativer Effekte bis hin zur vollständigen Neugestaltung einer Seite für bestimmte Nutzer reichen.

Bevor ich näher auf die Funktion eingehe, möchte ich einen Schritt zurücktreten und darüber nachdenken, wozu Animationen im Web verwendet werden. Sie können die Hintergrundinformationen auch überspringen und direkt zu den technischen Details springen.

Animation im Web

Animationen werden häufig verwendet, um Nutzern Feedback zu geben, z. B. um sie darüber zu informieren, dass eine Aktion empfangen und verarbeitet wurde. Auf einer Shopping-Website könnte beispielsweise ein Produkt so animiert werden, dass es in einen virtuellen Einkaufswagen „fliegt“, der als Symbol oben rechts auf der Website dargestellt ist.

Ein weiterer Anwendungsfall besteht darin, Bewegung zu verwenden, um die Wahrnehmung der Nutzer zu manipulieren. Dazu wird eine Mischung aus Skelettansichten, kontextbezogenen Metadaten und Bildvorschauen mit geringer Qualität verwendet, um die Nutzer viel Zeit in Anspruch zu nehmen und den gesamten Vorgang schneller erscheinen zu lassen. Ziel ist es, den Nutzern einen Kontext zu geben, was als Nächstes kommt, und gleichzeitig die Inhalte so schnell wie möglich zu laden.

Schließlich gibt es dekorative Effekte wie animierte Farbverläufe, Parallax-Scrolling, Hintergrundvideos und viele andere. Viele Nutzer mögen solche Animationen, andere hingegen empfinden sie als störend oder verlangsamend. Im schlimmsten Fall leiden Nutzer sogar an Reiseübelkeit, als ob sie sich in der Realität befinden würden. Für diese Nutzer ist die Reduzierung von Animationen also eine medizinische Notwendigkeit.

Bewegungsausgelöste vestibuläre Störung

Bei einigen Nutzern führen animierte Inhalte zu Ablenkungen oder Übelkeit. Scroll-Animationen können beispielsweise zu vestibulären Störungen führen, wenn sich andere Elemente als das Hauptelement, das mit dem Scrollen verknüpft ist, stark bewegen. Parallaxe-Scroll-Animationen können beispielsweise zu vestibulären Störungen führen, da sich Hintergrundelemente mit einer anderen Geschwindigkeit als Vordergrundelemente bewegen. Zu den Reaktionen auf vestibuläre (Innenohr-)Störungen gehören Schwindel, Übelkeit und Migräne. Manchmal ist Bettruhe erforderlich, um sich zu erholen.

Bewegungen auf Betriebssystemen entfernen

Viele Betriebssysteme haben schon seit langem Bedienungshilfen, mit denen sich die Anzahl der Bewegungen reduzieren lässt. Die folgenden Screenshots zeigen die Einstellung Bewegung reduzieren in macOS Mojave und die Einstellung Animationen entfernen in Android Pie. Wenn diese Optionen aktiviert sind, verwendet das Betriebssystem keine dekorativen Effekte wie Animationseffekte beim Starten von Apps. Auch Anwendungen selbst können und sollten diese Einstellung berücksichtigen und alle unnötigen Animationen entfernen.

Bewegungen im Web entfernen

Mit Media Queries Level 5 wird die Einstellung für reduzierte Bewegungen auch im Web unterstützt. Mit Mediaabfragen 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 Anzahl der verwendeten Animationen oder Bewegungen zu minimieren. Es kann zwei mögliche Werte haben:

• no-preference: Gibt an, dass der Nutzer im zugrunde liegenden Betriebssystem keine Einstellungen vorgenommen hat. Dieser Keyword-Wert wird im booleschen Kontext als false ausgewertet.
• reduce: Gibt an, dass der Nutzer eine Betriebssystemeinstellung festgelegt hat, die angibt, dass Bewegungen oder Animationen in Benutzeroberflächen minimiert werden sollen, vorzugsweise so, dass alle nicht wesentlichen Bewegungen entfernt werden.

Mit der Medienabfrage in CSS- und JavaScript-Kontexten arbeiten

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

Angenommen, ich habe eine wichtige Anmeldeschaltfläche, auf die der Nutzer klicken soll. Ich könnte eine aufmerksamkeitsstarke „Vibrations“-Animation definieren, aber als verantwortungsbewusster Webnutzer werde ich sie nur für Nutzer abspielen, die ausdrücklich mit Animationen einverstanden sind. Das gilt nicht für Nutzer, die Animationen deaktiviert haben, oder Nutzer in Browsern, die die Mediaabfrage 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;
  }
}

Angenommen, ich habe eine komplexe Animation mit der Web Animations API definiert.prefers-reduced-motion Während CSS-Regeln vom Browser dynamisch ausgelöst werden, wenn sich die Nutzereinstellungen ändern, muss ich bei JavaScript-Animationen selbst auf Änderungen achten und dann laufende Animationen manuell beenden (oder sie neu starten, wenn der Nutzer das zulässt):

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

Die runden Klammern um die eigentliche Medienabfrage sind obligatorisch:

window.matchMedia('prefers-reduced-motion: reduce');

window.matchMedia('(prefers-reduced-motion: reduce)');

Mit der Medienabfrage aus <picture>-Kontexten arbeiten

Ein interessanter Anwendungsfall ist es, das Abspielen eines animierten AVIF-, WebP- oder GIF-Bildes vom Attribut media abhängig zu machen. Wenn (prefers-reduced-motion: no-preference) zu true ausgewertet wird, kann die animierte Version angezeigt werden, andernfalls die statische Version:

<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>

Siehe folgendes Beispiel. Probieren Sie die Einstellungen für die Bewegungserkennung Ihres Geräts aus, um den Unterschied zu sehen.

Einstellungen des Nutzers zum Zeitpunkt der Anfrage ermitteln

Mit dem Client-Hinweis-Header Sec-CH-Prefers-Reduced-Motion können Websites die Bewegungseinstellungen des Nutzers optional bei der Anfrage abrufen, sodass Server aus Leistungsgründen das richtige CSS einfügen können.

Demo

Ich habe eine kleine Demo basierend auf den erstaunlichen 🐈 HTTP-Statuskatzen von Rogério Vicente erstellt. Lassen Sie sich zuerst einen Moment Zeit, um den Witz zu genießen. Er ist wirklich lustig. Ich warte. Jetzt, da Sie wieder da sind, möchte ich Ihnen die Demo vorstellen. Beim Scrollen wird jede HTTP-Statuskategorie abwechselnd von rechts oder links angezeigt. Die Animation läuft flüssig mit 60 fps. Wie bereits erwähnt, gefällt sie einigen Nutzern möglicherweise nicht oder sie bekommen sogar Schwindel. Daher ist die Demo so programmiert, dass prefers-reduced-motion berücksichtigt wird. Das funktioniert sogar dynamisch, sodass Nutzer ihre Einstellungen im laufenden Betrieb ändern können, ohne die Seite neu laden zu müssen. Wenn ein Nutzer weniger Bewegung bevorzugt, werden die nicht erforderlichen Animationen entfernt und es bleibt nur die normale Scrollbewegung übrig. Im folgenden Screencast ist die Demo in Aktion zu sehen:

Ergebnisse

Die Nutzereinstellungen zu respektieren, ist für moderne Websites entscheidend. Browser bieten immer mehr Funktionen, mit denen Webentwickler dies tun können. Ein weiteres Beispiel ist prefers-color-scheme, das erkennt, ob der Nutzer ein helles oder dunkles Farbschema bevorzugt. Alles über prefers-color-scheme erfährst du in meinem Artikel Hello Darkness, My Old Friend 🌒.

Die CSS Working Group standardisiert weitere Medienabfragen für Nutzereinstellungen wie prefers-reduced-transparency (ermittelt, ob der Nutzer eine reduzierte Transparenz bevorzugt), prefers-contrast (ermittelt, ob der Nutzer das System aufgefordert hat, den Kontrast zwischen benachbarten Farben zu erhöhen oder zu verringern) und inverted-colors (ermittelt, ob der Nutzer invertierte Farben bevorzugt).

(Bonus) Weniger Bewegung auf allen Websites erzwingen

Nicht jede Website verwendet prefers-reduced-motion oder nicht in ausreichendem Maße. Wenn Sie aus irgendeinem Grund die Bewegung auf allen Websites deaktivieren möchten, ist das möglich. Eine Möglichkeit dazu besteht darin, ein Stylesheet mit dem folgenden CSS in jede besuchte Webseite einzufügen. Es gibt mehrere Browsererweiterungen, die dies ermöglichen (Nutzung auf eigenes Risiko).

@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;
  }
}

Dabei werden die Dauern aller Animationen und Übergänge durch das vorherige CSS auf eine so kurze Zeit überschrieben, dass sie nicht mehr wahrnehmbar sind. Da einige Websites auf eine Animation angewiesen sind, um richtig zu funktionieren (z. B. weil ein bestimmter Schritt vom Auslösen des Ereignisses animationend abhängt), funktioniert der radikalere animation: none !important;-Ansatz nicht. Auch der vorherige Hack funktioniert nicht auf allen Websites. So kann er beispielsweise keine Bewegungen stoppen, die mit der Web Animations API gestartet wurden. Deaktivieren Sie ihn daher, wenn Sie Fehler bemerken.

Weitere Informationen

• Letzter Editor-Entwurf der Spezifikation Media Queries Level 5.
• prefers-reduced-motion auf Status der Chrome-Plattform.
• prefers-reduced-motion Chromium-Fehler.
• Blink Intent to Implement posting.

Danksagungen

Ein großes Dankeschön an Stephen McGruer, der prefers-reduced-motion in Chrome implementiert und zusammen mit Rob Dodson auch dieses Dokument geprüft hat. Hero-Image von Hannah Cauhepe auf Unsplash.