Prefers reduced motion: Animation, die alle nutzen können

Prefers reduced motion, in CSS prefers-reduced-motion, ist ein Media-Feature, das deiner Website mitteilt, dass jemand sein Gerät gebeten hat, nicht notwendige Bewegung zu minimieren. Meldet es reduce, solltest du die Seite beruhigen: automatisch laufende Loops stoppen, Slides, Zooms und Parallax durch sanftes Einblenden oder gar nichts ersetzen und ruhende Versionen animierter Hintergründe zeigen. Es ist wenig Arbeit und macht eine Website für Menschen nutzbar, die sie sonst mit Unwohlsein verlassen würden.

Für wen reduzierte Bewegung ist

Manche Menschen haben vestibuläre Störungen, die das Innenohr und den Gleichgewichts- und Bewegungssinn des Gehirns betreffen. Für sie kann große Bewegung auf dem Bildschirm, vor allem Parallax, Zooms und Elemente, die über große Flächen gleiten, Schwindel, Übelkeit, Kopfschmerzen oder Orientierungslosigkeit auslösen. Andere finden ständige Bewegung ablenkend, haben Migräne oder mögen schlicht einen ruhigeren Bildschirm. Sie alle nutzen denselben Schalter in ihren Geräteeinstellungen, und sie sollten nicht erklären müssen, warum.

Was du reduzierst und was bleiben kann

Reduzierte Bewegung ist nicht dasselbe wie keine Bewegung. Ziel ist, Bewegung zu entfernen, die eine Reise durch den Raum simuliert oder große Teile des Bildschirms füllt, und alles zu stoppen, was von selbst abspielt. Kleines, schnelles Feedback und einfaches Einblenden sind in der Regel in Ordnung und helfen oft zu verstehen, was sich geändert hat.

Ersetze, wo es geht, statt zu löschen. Gleitet ein Panel normalerweise von der Seite herein, lass es stattdessen einblenden. Spielt der Hero einen Loop, zeig ein Standbild daraus. Das Design bleibt intakt, nur die Bewegung durch den Raum fällt weg.

So respektierst du prefers-reduced-motion in CSS

Am robustesten ist es, Bewegung als Erweiterung zu behandeln. Schreib zuerst das ruhige Design und füge Bewegung dann in einer Media Query hinzu, die nur gilt, wenn keine Präferenz gesetzt ist. Wird die Query nicht unterstützt oder ist die Einstellung an, ist die Seite einfach ruhig. Die MDN-Seite zu prefers-reduced-motion dokumentiert das Feature.

/* Still by default */
.hero-bg {
  background: linear-gradient(135deg, #1e1b4b, #6d28d9 55%, #db2777);
  background-size: 100% 100%;
}
.card {
  opacity: 0;
  transition: opacity 200ms ease-out; /* a fade is fine for everyone */
}
.card.is-visible {
  opacity: 1;
}

/* Movement only for visitors with no preference */
@media (prefers-reduced-motion: no-preference) {
  .hero-bg {
    background-size: 200% 200%;
    animation: drift 20s linear infinite alternate;
  }
  .card {
    transform: translateY(24px);
    transition: opacity 200ms ease-out, transform 300ms cubic-bezier(0, 0, 0.2, 1);
  }
  .card.is-visible {
    transform: none;
  }
}

@keyframes drift {
  to { background-position: 100% 100%; }
}

Reduzierte Bewegung in JavaScript, Video und Canvas

Bewegung, die von Skripten gesteuert wird, etwa Scroll-Effekte, Canvas- oder WebGL-Hintergründe und Video, braucht eine Prüfung in JavaScript. Lies die Einstellung mit matchMedia und hör auf Änderungen, denn Leute können sie umschalten, während deine Seite offen ist.

const query = matchMedia('(prefers-reduced-motion: reduce)')
const video = document.querySelector('.hero-video')

function apply() {
  if (query.matches) {
    video?.pause()            // the poster image stays
    stopBackgroundLoop()      // your canvas or WebGL loop: draw one frame, then stop
  } else {
    video?.play().catch(() => {})
    startBackgroundLoop()
  }
}

query.addEventListener('change', apply)
apply()

Hintergrundvideos und live gerenderte Farbverläufe sind die häufigsten Übeltäter, weil sie von selbst abspielen. Videohintergründe auf Websites und Shader-Farbverläufe zeigen beide, wo die Prüfung hingehört.

Was die WCAG zu Bewegung sagen

Drei Erfolgskriterien der Web Content Accessibility Guidelines betreffen Bewegung. Die Unterstützung reduzierter Bewegung ist der praktische Weg, das erste zu erfüllen, ein Pause-Button erledigt das zweite.

Ruhende Versionen gestalten, die trotzdem gut aussehen

Die ruhende Version sollte sich nicht wie eine kaputte anfühlen. Wähle bei animierten Hintergründen das Frame, das allein am besten aussieht, nicht einfach das erste. Sorg bei Einblendungen dafür, dass das fertige Layout auch ohne sie vollständig ist. Bei Loops aus einem Markenmaterial hält ein gut gewähltes Standbild desselben Materials die Identität intakt. Grundlagen des Motion Designs empfiehlt aus diesem Grund, jede Animation mit einem einzelnen pausierten Frame zu testen.

Gradiently folgt derselben Regel: Live-Marks in der App stehen still, wenn dein Gerät um reduzierte Bewegung bittet, und jedes Design, das du als Loop exportierst, kannst du auch als PNG-Standbild desselben Marks exportieren, für Orte, an denen Bewegung nicht willkommen ist. Bei Social Posts, wo du die Einstellung nicht erkennen kannst, ist langsame, sanfte Bewegung der freundlichste Weg, siehe animierte Farbverlauf-Hintergründe.

1. 1

   Schalte die Einstellung ein

   Aktiviere im Betriebssystem das Reduzieren von Bewegung und lade die Website neu.

2. 2

   Prüf alles, was sich bewegt

   Heroes, Karussells, Scroll-Effekte, Videos, Canvas-Elemente und Ladezustände sollten alle ruhig sein.

3. 3

   Schalte sie um, während die Seite offen ist

   Deine Skripte sollten der Änderung ohne Neuladen folgen.

4. 4

   Emuliere sie in den Entwicklertools

   Chrome und Firefox können das Media-Feature emulieren, das geht beim Arbeiten schneller.

5. 5

   Schau dir das ruhende Design an

   Achte darauf, dass die reduzierte Version gewollt und vollständig aussieht, nicht so, als hätte etwas nicht geladen.