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

Visuelle Überlastung im echten Leben.

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 zum kompletten Neudesign 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 vieles mehr. Viele Nutzer mögen solche Animationen, andere hingegen finden sie störend oder verlangsamend. Im schlimmsten Fall leiden Nutzer sogar an Reiseübelkeit, als wäre es ein reales Erlebnis. 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. Scrollanimations 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 zur Erholung erforderlich.

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 Mediaabfrage 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 bis alle nicht wesentlichen Bewegungen entfernt sind.

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 für das 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.prefers-reduced-motion 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.
});

Die runden Klammern um die eigentliche Medienabfrage sind obligatorisch:

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 sicher 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 aus, die Bewegungseinstellungen Ihres Geräts zu ändern, 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 mit 60 fps butterweich ab. Wie bereits erwähnt, gefällt sie einigen Nutzern möglicherweise nicht oder sie bekommen dadurch sogar Reiseübelkeit. 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:

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