prefers-reduced-motion: Animationen barrierefrei gestalten

1. Warum Bewegungseffekte manche Nutzer krank machen

Große, schnelle oder scheinbar unkontrollierte Bewegung im Interface ist für Menschen mit vestibulären Störungen kein ästhetisches Detail, sondern ein handfester Auslöser körperlicher Symptome. Das vestibuläre System im Innenohr steuert das Gleichgewichtsgefühl, und wenn visuelle Bewegungsreize nicht mit der tatsächlichen Körperbewegung übereinstimmen, entsteht ein Konflikt, den das Gehirn als Bewegungskrankheit interpretiert. Parallax-Scrolling, bei dem Vordergrund und Hintergrund unterschiedlich schnell wandern, ist einer der stärksten Auslöser überhaupt, weil es genau diesen Widerspruch simuliert. Nach Angaben des amerikanischen National Institute on Deafness and Other Communication Disorders erlebt ein erheblicher Teil der erwachsenen Bevölkerung im Laufe des Lebens irgendeine Form vestibulärer Beeinträchtigung.

Die Symptome reichen von leichtem Schwindel und Konzentrationsverlust bis zu Übelkeit, Kopfschmerzen und ausgewachsenen Migräneattacken, die eine Website unmittelbar unbenutzbar machen. Besonders riskant sind großflächige Zoom- und Rotationsanimationen, automatisch abspielende Hintergrundvideos und Scroll-getriebene Reveal-Effekte, bei denen sich mehrere Elemente gleichzeitig und in unterschiedliche Richtungen bewegen. WCAG 2.3.3 (Animation from Interactions) verlangt deshalb auf Stufe AAA, dass durch Interaktion ausgelöste Bewegung deaktivierbar ist, sofern sie nicht essenziell für die Funktion ist, und WCAG 2.2.2 (Pause, Stop, Hide) fordert bereits auf Stufe A eine Kontrolle über automatisch startende, sich bewegende Inhalte.

2. Die Media Query prefers-reduced-motion: Funktionsweise und Support

Seit 2019 unterstützen alle wichtigen Betriebssysteme und Browser die CSS-Media-Query prefers-reduced-motion, mit den beiden möglichen Werten no-preference und reduce. Nutzer setzen diese Präferenz nicht auf der Website selbst, sondern zentral in den Barrierefreiheits-Einstellungen ihres Betriebssystems: macOS unter „Systemeinstellungen, Bedienungshilfen, Anzeige, Bewegung reduzieren“, Windows unter „Einstellungen, Erleichterte Bedienung, Visuelle Effekte, Animationseffekte“, iOS und Android an vergleichbarer Stelle. Diese Einstellung wirkt betriebssystemweit für alle Apps und Websites gleichzeitig, was sie deutlich zuverlässiger macht als eine einzelne, website-spezifische Opt-out-Schaltfläche, die viele Nutzer gar nicht erst finden.

Wichtig für die Umsetzung: reduce bedeutet nicht „keine Bewegung überhaupt“, sondern „so wenig Bewegung wie für die Funktion nötig“. Die Spezifikation formuliert das bewusst als Präferenz, nicht als Verbot, weil manche Bewegung, etwa ein dezenter Ladeindikator, weiterhin sinnvoll bleibt. In CSS wird die Query klassischerweise als „Opt-in in Reduce“ verwendet, also Animationen normal definiert und dann gezielt für reduce zurückgenommen, statt umgekehrt für no-preference anzureichern. Das stellt sicher, dass eine Website auch dann sicher bleibt, wenn ein Browser die Query in Zukunft anders auswertet oder gar nicht unterstützt.

3. CSS: Animationen und Transitions gezielt zurücknehmen

Der robusteste CSS-Ansatz kombiniert zwei Techniken: Erstens werden Bewegungsdauer und Bewegungsdistanz über CSS-Custom-Properties zentral definiert, sodass ein einziger Media-Query-Block die gesamte Website beeinflusst, statt jede Animation einzeln zu überschreiben. Zweitens werden problematische Eigenschaften wie große transform: translate- oder scale-Werte, Parallax-background-attachment und automatisch startende animation-Deklarationen gezielt neutralisiert, ohne dabei sinnvolle Zustandsübergänge komplett zu entfernen. Auch scroll-behavior: smooth zählt zu den Bewegungseffekten, die bei aktivierter Präferenz auf auto zurückgesetzt werden sollten, weil ruckartiges Springen für viele Nutzer angenehmer ist als ein erzwungenes, sanftes Scrollen über eine ganze Seite hinweg.

Eine häufig empfohlene, aber zu grobe Lösung ist ein globaler Selektor wie * { animation: none !important; } innerhalb der Media Query. Das funktioniert technisch, entfernt aber auch essenzielle Bewegung wie Fokusringe, Ladeindikatoren oder Statuswechsel, die für die Bedienbarkeit selbst notwendig sind. Der gezieltere Weg reduziert stattdessen animation-duration und transition-duration auf einen minimalen, aber nicht null gesetzten Wert und lässt Element-spezifische, nicht-vestibulär-riskante Übergänge wie Farbwechsel oder Opazität unangetastet.

/* Basis: Bewegungsdauer und Distanz zentral als Custom Properties definieren */
:root {
  --motion-duration: 0.6s;
  --motion-distance: 40px;
  --motion-easing: cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-reveal {
  transform: translateY(var(--motion-distance));
  transition: transform var(--motion-duration) var(--motion-easing),
              opacity var(--motion-duration) var(--motion-easing);
}

.parallax-layer {
  background-attachment: fixed; /* starker vestibulärer Trigger */
  transform: translateY(calc(var(--scroll-offset, 0) * 0.4));
}

/* Reduzierte statt keine Bewegung: kurze Dauer, keine Translation, kein Parallax */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration: 0.01ms;
    --motion-distance: 0px;
  }

  .parallax-layer {
    background-attachment: scroll; /* Parallax-Trigger komplett entfernen */
    transform: none;
  }

  html {
    scroll-behavior: auto; /* kein erzwungenes Smooth-Scrolling */
  }

  /* Essenzielle Bewegung bewusst ausnehmen: Fokusring bleibt sichtbar */
  .focus-ring-pulse {
    animation-duration: 1.2s;
  }
}

4. JavaScript: matchMedia und dynamische Animationen steuern

CSS-Media-Queries greifen nur bei rein deklarativen Animationen. Sobald JavaScript Positionen berechnet, etwa bei Scroll-getriebenem Parallax über requestAnimationFrame, IntersectionObserver-gesteuerten Reveal-Effekten oder Canvas-Animationen, muss die Präferenz explizit über window.matchMedia('(prefers-reduced-motion: reduce)') abgefragt werden. Entscheidend ist dabei, nicht nur den Wert beim Laden der Seite einmalig zu prüfen, sondern zusätzlich auf das change-Event des MediaQueryList-Objekts zu lauschen. Nutzer können die Systemeinstellung jederzeit ändern, während die Seite bereits geöffnet ist, und ein Skript, das nur beim initialen Laden prüft, ignoriert diese Änderung bis zum nächsten vollständigen Neuladen.

Bei laufenden requestAnimationFrame-Schleifen bedeutet konsequente Umsetzung, die Schleife bei aktivierter Präferenz entweder komplett zu stoppen oder auf eine deutlich reduzierte Bewegungsamplitude umzuschalten, statt sie unverändert weiterlaufen zu lassen. Für Canvas- oder WebGL-basierte Hintergrundanimationen, die von CSS gar nicht erreicht werden können, ist das die einzige verlässliche Stelle, an der die Nutzerpräferenz überhaupt greifen kann.

// Reduced-Motion-Präferenz zentral kapseln und live auf Änderungen reagieren
const motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
let prefersReducedMotion = motionQuery.matches;

motionQuery.addEventListener('change', (event) => {
  prefersReducedMotion = event.matches;
  updateParallaxState();
});

let rafId = null;

function startParallaxLoop() {
  if (prefersReducedMotion) {
    // Keine kontinuierliche Bewegungsschleife starten
    return;
  }

  function frame() {
    const offset = window.scrollY * 0.4;
    document.querySelectorAll('.parallax-layer').forEach((el) => {
      el.style.transform = `translateY(${offset}px)`;
    });
    rafId = requestAnimationFrame(frame);
  }
  rafId = requestAnimationFrame(frame);
}

function updateParallaxState() {
  if (prefersReducedMotion && rafId) {
    cancelAnimationFrame(rafId);
    rafId = null;
    document.querySelectorAll('.parallax-layer').forEach((el) => {
      el.style.transform = 'none';
    });
  } else if (!prefersReducedMotion && !rafId) {
    startParallaxLoop();
  }
}

updateParallaxState();

5. Reduziert statt entfernt: sinnvolle Fallbacks gestalten

Der wichtigste konzeptionelle Fehler ist, „reduzierte Bewegung“ mit „gar keine Bewegung“ gleichzusetzen. Ein Interface, das bei aktivierter Präferenz sämtliche Übergänge abrupt und ohne jede Rückmeldung springen lässt, verliert Orientierungshilfen, die auch für Nutzer mit vestibulären Störungen wertvoll sind, etwa ein sanftes Einblenden neuer Inhalte, das signalisiert, dass gerade etwas geladen wurde. Die bessere Strategie unterscheidet zwischen vestibulär riskanter Bewegung, die entfernt werden muss, und funktional wichtiger, aber ungefährlicher Bewegung, die in reduzierter Form erhalten bleibt: kurze Opazitätswechsel statt große Translationen, ein einfacher Farbwechsel statt Rotation und Skalierung gleichzeitig, ein kurzer, kleiner Puls statt eines springenden Bounce-Effekts.

Praktisch lässt sich das über ein zentrales Motion-Token-System steuern, das für jede Bewegungsart zwei Ausprägungen definiert, eine für die Standardpräferenz und eine für reduce. So bleibt die Codebasis konsistent, und Design-Entscheidungen über akzeptable reduzierte Bewegung werden an einer Stelle getroffen statt verstreut in einzelnen Komponenten.

{
  "motionTokens": {
    "heroReveal": {
      "default": { "duration": "600ms", "distance": "40px", "property": "transform, opacity" },
      "reduce":   { "duration": "150ms", "distance": "0px",  "property": "opacity" }
    },
    "cardHover": {
      "default": { "duration": "250ms", "transform": "scale(1.04)" },
      "reduce":   { "duration": "150ms", "transform": "none", "property": "box-shadow" }
    },
    "pageTransition": {
      "default": { "duration": "500ms", "effect": "slide-fade" },
      "reduce":   { "duration": "120ms", "effect": "fade-only" }
    },
    "loadingIndicator": {
      "default": { "duration": "1200ms", "effect": "spin" },
      "reduce":   { "duration": "1200ms", "effect": "pulse-opacity" }
    }
  }
}

6. Framework-Integration: Alpine.js, GSAP und die Web Animations API

In Hyvä-Themes lässt sich die Präferenz sauber als globaler Alpine.js-Store kapseln, sodass jede Komponente im Template darauf zugreifen kann, ohne die Media Query mehrfach selbst abzufragen. Der Store hält den aktuellen Wert reaktiv und aktualisiert sich automatisch über den change-Listener, sodass x-bind- und x-transition-Direktiven direkt auf die Präferenz reagieren können. Für aufwendigere Animationsbibliotheken wie GSAP bietet die gsap.matchMedia()-API einen nativen Weg, komplette Animationskontexte an Media-Query-Zustände zu binden, inklusive automatischem Aufräumen beim Zustandswechsel.

Auch die native Web Animations API (element.animate()) sollte die Präferenz vor jedem Aufruf prüfen und bei reduce entweder mit reduzierten Keyframes oder direkt mit getAnimations().forEach(a => a.finish()) arbeiten, um eine Animation sofort in ihren Endzustand zu versetzen, statt sie unterdrückt im Anfangszustand steckenzulassen.

<!-- Hyvä phtml: globaler Alpine-Store für Reduced-Motion-Präferenz -->
<script type="text/x-magento-init">
{
    "*": {
        "Magento_PageCache/js/page-cache": {}
    }
}
</script>

<div x-data
     x-init="
        Alpine.store('motion', { reduced: window.matchMedia('(prefers-reduced-motion: reduce)').matches });
        window.matchMedia('(prefers-reduced-motion: reduce)').addEventListener('change', (e) => {
            Alpine.store('motion').reduced = e.matches;
        });
     ">
</div>

<!-- Komponente reagiert direkt auf den globalen Store -->
<div
    x-data="{ open: false }"
    x-show="open"
    x-transition:enter.duration.500ms="!$store.motion.reduced"
    x-transition:enter.duration.100ms="$store.motion.reduced"
    x-transition:enter="transition ease-out"
    x-transition:enter-start="opacity-0"
    x-transition:enter-end="opacity-100"
>
  Bestätigung: Artikel wurde zum Warenkorb hinzugefügt.
</div>

7. Testen: Betriebssystem-Einstellungen, DevTools und automatisierte Checks

Der zuverlässigste Test bleibt das Umschalten der echten Betriebssystem-Einstellung, weil das sicherstellt, dass sowohl CSS-Media-Queries als auch JavaScript-Abfragen korrekt reagieren. Für schnelle Iterationen während der Entwicklung bietet Chrome DevTools im Reiter „Rendering“ die Option „Emulate CSS media feature prefers-reduced-motion“, mit der sich der Zustand ohne Systemwechsel simulieren lässt. Firefox bietet eine vergleichbare Funktion über die Responsive-Design-Werkzeuge.

Für automatisierte Regressionstests unterstützt Playwright das direkte Setzen der Präferenz über page.emulateMedia({ reducedMotion: 'reduce' }), wodurch sich prüfen lässt, ob eine Parallax-Schicht tatsächlich stillsteht oder ein Ladeindikator korrekt auf die reduzierte Variante wechselt. axe-core erkennt fehlende prefers-reduced-motion-Behandlung nicht automatisch, weil es sich um ein Verhaltensproblem und nicht um ein rein statisches Markup-Problem handelt. Deshalb bleibt ein gezielter, manueller oder skriptgestützter Funktionstest für jede bewegungsintensive Komponente unverzichtbar.

// Playwright-Test: Parallax-Layer bewegt sich nicht bei reduzierter Präferenz
const { test, expect } = require('@playwright/test');

test('parallax layer stays static with prefers-reduced-motion: reduce', async ({ page }) => {
  await page.emulateMedia({ reducedMotion: 'reduce' });
  await page.goto('https://shop.example.com/');

  const transformBefore = await page.locator('.parallax-layer').evaluate(
    (el) => getComputedStyle(el).transform
  );

  await page.mouse.wheel(0, 800);
  await page.waitForTimeout(300);

  const transformAfter = await page.locator('.parallax-layer').evaluate(
    (el) => getComputedStyle(el).transform
  );

  expect(transformAfter).toBe(transformBefore);
});

8. Häufige Fehler bei der Umsetzung

Der häufigste Fehler ist die einmalige Prüfung der Präferenz beim Seitenaufruf, ohne auf das change-Event zu reagieren. Da Nutzer die Einstellung jederzeit im Betriebssystem umschalten können, muss eine Website in derselben Sitzung darauf reagieren, sonst bleibt eine bereits geöffnete Seite bei der ursprünglich erkannten Präferenz stehen. Ein zweiter verbreiteter Fehler betrifft Video- und GIF-Inhalte: Ein <video autoplay>-Element mit Bewegtbild-Hintergrund reagiert nicht automatisch auf die Media Query und muss explizit per JavaScript pausiert oder durch ein statisches Poster-Bild ersetzt werden, animierte GIFs lassen sich clientseitig gar nicht anhalten und sollten durch pausierbare Video- oder CSS-Alternativen ersetzt werden.

Ein dritter Fehler ist die zu grobe Anwendung von animation: none !important auf alle Elemente, wodurch auch essenzielle, ungefährliche Bewegung wie Ladeindikatoren oder Fokusringe verschwindet und Nutzer dadurch systemseitiges Feedback verlieren. Ein vierter, oft übersehener Fehler betrifft Scroll-getriebene JavaScript-Bibliotheken von Drittanbietern, etwa für Slider oder Karussells, die eigene, nicht respektierte Bewegungslogik mitbringen. Vor dem Einsatz einer solchen Bibliothek lohnt sich die Prüfung, ob sie eine eigene Reduced-Motion-Option anbietet, oder ob die Bewegung manuell über einen Wrapper unterdrückt werden muss.

9. Bewegungseffekte im Vergleich: riskant gegen barrierefrei

Nicht jeder Bewegungseffekt ist gleich riskant, und nicht jede barrierefreie Alternative bedeutet den vollständigen Verzicht auf Bewegung. Die folgende Übersicht zeigt für die häufigsten Effekttypen in Magento- und Hyvä-Shops, welches Verhalten problematisch ist und wie die reduzierte, weiterhin funktionale Alternative aussieht.

Auffällig ist, dass sich das Grundmuster über alle Effekttypen wiederholt: Bewegungen, die zwei oder mehr visuelle Ebenen gegeneinander verschieben oder eine große Fläche schnell skalieren, sind die Hauptauslöser. Ein kurzer, kleiner Opazitätswechsel ist fast nie ein Problem und liefert weiterhin die nötige Rückmeldung, dass sich der Zustand des Interfaces geändert hat.

10. Zusammenfassung

Parallax-Scrolling, große Zoom-Übergänge und autoplayende Hintergrundvideos sind für Nutzer mit vestibulären Störungen keine kosmetische Frage, sondern können Übelkeit, Schwindel und Migräne auslösen. prefers-reduced-motion gibt dieser Nutzergruppe eine betriebssystemweite Möglichkeit, ihre Präferenz mitzuteilen, und Websites müssen diese Präferenz sowohl in deklarativem CSS über die Media Query als auch in JavaScript-gesteuerten Animationen über matchMedia respektieren, inklusive Reaktion auf das change-Event zur Laufzeit. Entscheidend ist dabei, reduzierte statt fehlende Bewegung anzubieten: vestibulär riskante Effekte wie Parallax und großflächige Skalierung entfernen, funktional wichtige, ungefährliche Bewegung wie dezente Opazitätswechsel dagegen erhalten.

In Hyvä-Themes lässt sich die Präferenz sauber über einen globalen Alpine.js-Store kapseln, ohne zusätzliche Bibliotheken einzubinden. Wer die Media Query konsequent über CSS-Custom-Properties und ein zentrales Motion-Token-System steuert und die Umsetzung mit Playwright-Tests gegen Regressionen absichert, macht Bewegung im Interface zu einem gestalterischen Werkzeug statt zu einer Zugangsbarriere für einen Teil der Nutzerschaft.

11. FAQ: prefers-reduced-motion und barrierefreie Animationen