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.

Unterstützte Browser

• 74
• 79
• 63
• 10.1

Quelle

Zu viel Bewegung im wirklichen Leben und im Web

Neulich war ich mit meinen Kindern Eislaufen. Es war ein wundervoller Tag, die Sonne schien und die Eisbahn war voller Menschen ⛸. Das einzige Problem damit: Ich komme nicht gut mit Menschenmengen zurecht. 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.

Visuelle Überlastung im echten Leben.

Gelegentlich kann das auch im Web passieren: Bei blinkenden Anzeigen, ausgefallenen Parallaxe-Effekten, überraschenden Enthüllungsanimationen, automatisch wiedergegebenen Videos und mehr kann das Web manchmal ziemlich überwältigend sein... Glücklicherweise 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 Bewegungen mit geringerem Bewegungsumfang bevorzugen. Das kann von der Vermeidung von automatisch abgespielten Videos über das Deaktivieren bestimmter rein dekorativer Effekte bis hin zur kompletten 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 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 beispielsweise ein Produkt animiert werden, um in einen virtuellen Einkaufswagen zu „fliegen“, der als Symbol oben rechts auf der Website dargestellt ist.

Ein weiterer Anwendungsfall ist die Nutzung von Bewegung, um die Wahrnehmung des Nutzers zu hacken. Dazu wird eine Mischung aus Rasterbildschirmen, kontextbezogenen Metadaten und Bildvorschauen niedriger Qualität verwendet, um viel Zeit des Nutzers zu kosten und die gesamte Nutzung schneller zu gestalten. 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 vieles mehr. Während viele Nutzer solche Animationen mögen, mögen einige sie nicht, weil sie sich von ihnen abgelenkt oder verlangsamt fühlen. Im schlimmsten Fall können Nutzer sogar unter Bewegungskrankheit leiden, als wäre es eine reale Erfahrung. Für diese Nutzer ist die Reduzierung von Animationen also medizinisch notwendig.

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. Reaktionen auf veestibuläre (Innerohr-)Erkrankungen sind Schwindel, Übelkeit und Migräne. Manchmal ist Bettruhe erforderlich, um sich zu erholen.

Bewegungen auf Betriebssystemen entfernen

Viele Betriebssysteme haben schon lange Bedienungshilfen, mit denen reduzierte Bewegungen bevorzugt werden können. Die folgenden Screenshots zeigen die Einstellung Bewegung reduzieren in macOS Mojave und die Einstellung Animationen entfernen in Android Pie. Wenn diese Einstellungen aktiviert sind, verwendet das Betriebssystem keine dekorativen Effekte wie App-Startanimationen. 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 Menge 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 Schnittstellen Bewegungen oder Animationen minimieren sollen, vorzugsweise bis zu dem Punkt, an dem alle unwichtigen 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;
  }
}

Hinweis: Wenn Sie viel animationsfähiges CSS haben, können Sie Nutzern, die die Funktion deaktiviert haben, den Download ersparen, indem Sie alle animationsfähigen CSS-Dateien in ein separates Stylesheet auslagern, das Sie nur bedingt mit dem media-Attribut auf dem link-Element laden 😎: <link rel="stylesheet" href="animations.css" media="(prefers-reduced-motion: no-preference)">

Angenommen, ich habe eine komplexe Animation mit der Web Animations API definiert. CSS-Regeln werden vom Browser dynamisch ausgelöst, wenn sich die Nutzereinstellungen ändern. Bei JavaScript-Animationen muss ich selbst auf Änderungen achten und dann laufende Animationen manuell beenden (oder 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.
});

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

Don'ts

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

Do

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>

Hier ein Beispiel: Wechseln Sie die Bewegungseinstellungen Ihres Geräts, 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 erstellt, die auf den 🐈 HTTP-Status-Katzen von Rogério Vicente basiert. Erstens: Nimm dir einen Moment Zeit, um den Witz zu schätzen. Er ist urkomisch und 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. Es ist eine flüssige Animation mit 60 fps, aber wie bereits erwähnt, kann es einigen Nutzern nicht gefallen oder sie übersehen werden. Daher ist die Demo so programmiert, dass sie prefers-reduced-motion berücksichtigt. 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:

Video zur Demo der App prefers-reduced-motion

Schlussfolgerungen

Die Nutzereinstellungen zu respektieren, ist für moderne Websites von entscheidender Bedeutung. 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 dies ist für Sie vielleicht nicht signifikant genug. 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 verschiedene Browsererweiterungen, die dies auf eigenes Risiko ermöglichen.

@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 ist nicht garantiert, dass er auf allen Websites erfolgreich ist (z. B. kann er keine Bewegung stoppen, die mit der Web Animations API initiiert wurde). Daher ist es ratsam, ihn zu deaktivieren, wenn Sie eine Störung 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.