prefers-reduced-motion respektieren: Animationen gezielt abschalten

1. Was prefers-reduced-motion ist und wer die Einstellung nutzt

prefers-reduced-motion ist eine Systemeinstellung, die unter Windows, macOS, iOS und Android verfügbar ist und dem Browser mitteilt, dass ein Nutzer Bewegungseffekte reduziert haben möchte. Genutzt wird diese Einstellung vor allem von Menschen mit vestibulären Störungen, deren Gleichgewichtsorgan überempfindlich auf visuelle Bewegungsreize reagiert, sowie von Menschen mit Migräne, bei denen bestimmte Animationsmuster einen Anfall auslösen können.

Wichtig ist, dass diese Einstellung keine seltene Nischenanforderung ist, sondern laut verschiedenen Erhebungen einen spürbaren Anteil der Nutzerschaft betrifft, der oft deutlich höher liegt als vielen Entwicklerteams bewusst ist, weil betroffene Nutzer die Einstellung meist dauerhaft im Betriebssystem hinterlegen und sie daher unabhängig von der konkret besuchten Seite gilt.

2. matchMedia in einer Alpine-Komponente auslesen

Die Systemeinstellung lässt sich im Browser über window.matchMedia('(prefers-reduced-motion: reduce)').matches direkt als Boolean abfragen, ganz ohne zusätzliche Bibliothek. In einer Alpine-Komponente wird dieser Wert typischerweise beim init() einmalig gelesen und als reaktive Eigenschaft gespeichert, damit er im gesamten Markup der Komponente über x-bind und x-show verfügbar ist.

Entscheidend ist, matchMedia nicht nur einmalig abzufragen, sondern zusätzlich einen change-Listener auf das MediaQueryList-Objekt zu registrieren, denn ein Nutzer kann die Systemeinstellung jederzeit ändern, ohne die Seite neu zu laden, etwa während eines Tests der eigenen Barrierefreiheitseinstellungen. Wird nur einmalig gelesen, bleibt eine spätere Änderung der Einstellung während der laufenden Sitzung unberücksichtigt.

3. Ein globaler Alpine.store für die Bewegungspräferenz

Da die Bewegungspräferenz für praktisch jede animierte Komponente auf der Seite relevant ist, lohnt sich ein zentraler Alpine.store, der die Präferenz einmalig ermittelt und über die gesamte Anwendung hinweg konsistent zur Verfügung stellt, statt in jeder einzelnen Komponente eine eigene matchMedia-Abfrage zu duplizieren. Jede Komponente greift dann einheitlich über $store.motion.reduced auf denselben Wert zu.

Dieser zentrale Store registriert den change-Listener genau einmal beim Initialisieren der Anwendung und aktualisiert seine reaktive Eigenschaft bei jeder Änderung, wodurch alle daran gebundenen Komponenten automatisch und ohne zusätzlichen Code auf eine spätere Änderung der Systemeinstellung reagieren.

document.addEventListener('alpine:init', () => {
  Alpine.store('motion', {
    reduced: window.matchMedia('(prefers-reduced-motion: reduce)').matches,

    init() {
      const query = window.matchMedia('(prefers-reduced-motion: reduce)');
      query.addEventListener('change', (event) => {
        this.reduced = event.matches;
      });
    },
  });
});

4. x-transition konditional deaktivieren

Mit dem globalen Store lässt sich jede x-transition-Direktive so anpassen, dass sie bei aktivierter Präferenz für reduzierte Bewegung entweder komplett entfällt oder auf eine sehr kurze, nicht-räumliche Alternative wie ein reines Ein- und Ausblenden der Deckkraft ohne Verschiebung oder Skalierung umgestellt wird. Alpine erlaubt dafür, die Transition-Klassen oder -Dauern dynamisch über einen gebundenen Ausdruck zu steuern.

Ein bewährtes Muster ist, die Übergangsdauer über eine berechnete Eigenschaft an $store.motion.reduced zu koppeln, sodass bei reduzierter Bewegung eine Dauer von praktisch null Millisekunden verwendet wird, während der visuelle End- und Anfangszustand identisch bleiben. So verschwindet die Bewegung vollständig, ohne dass die grundlegende Sichtbarkeitslogik der Komponente separat gepflegt werden müsste.

<div x-data="{ open: false }">
  <button @click="open = !open">Menü öffnen</button>

  <div
    x-show="open"
    x-transition:enter="transition ease-out"
    :x-transition:enter.duration="$store.motion.reduced ? 1 : 200"
    x-transition:enter-start="opacity-0"
    x-transition:enter-end="opacity-100"
    x-transition:leave="transition ease-in"
    :x-transition:leave.duration="$store.motion.reduced ? 1 : 150"
    x-transition:leave-start="opacity-100"
    x-transition:leave-end="opacity-0"
  >
    Menüinhalt
  </div>
</div>

5. Praxisbeispiel: Mega-Menü ohne Animation bei reduzierter Bewegung

Ein Mega-Menü im Hyvä-Header, das normalerweise mit einem sanften Aufklappen samt leichter vertikaler Verschiebung erscheint, wechselt bei aktivierter Präferenz auf ein sofortiges Ein- und Ausblenden ohne jede Verschiebung. Der Nutzer verliert dadurch keinerlei Funktionalität, das Menü öffnet und schließt weiterhin exakt wie zuvor, lediglich die Bewegung selbst entfällt.

Wichtig ist, dass dieselbe Logik konsequent auf alle animierten Elemente der Seite angewendet wird, nicht nur auf ein einzelnes Beispiel-Widget, denn ein Nutzer mit vestibulärer Störung profitiert nur dann tatsächlich, wenn die Reduktion durchgängig über Mini-Cart, Modal, Tooltip und Slider hinweg konsistent greift, statt an einzelnen Stellen vergessen zu werden.

6. Die CSS-Ebene parallel nutzen: @media (prefers-reduced-motion: reduce)

Neben der JavaScript-Lösung über den Alpine-Store lässt sich dieselbe Media Query auch direkt in CSS einsetzen, um Übergänge und Keyframe-Animationen pauschal für alle Elemente zu kürzen, die nicht über eine explizite Alpine-Direktive gesteuert werden, etwa reine CSS-Hover-Effekte oder Tailwind-Utility-Klassen mit transition. Beide Ebenen ergänzen sich und sollten nicht als Alternative zueinander verstanden werden.

Eine sinnvolle Arbeitsteilung ist, die CSS-Media-Query als globales Sicherheitsnetz für alle nicht explizit von Alpine gesteuerten Übergänge zu nutzen, während der Alpine-Store gezielt für komplexere, zustandsgesteuerte Animationen zum Einsatz kommt, bei denen eine reine CSS-Lösung nicht ausreicht, weil die Animation an eine Alpine-Zustandsänderung gebunden ist.

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

7. Live-Reaktion auf eine Änderung der Systemeinstellung zur Laufzeit

Ändert ein Nutzer die Bewegungspräferenz über die Betriebssystemeinstellungen, während die Seite bereits geöffnet ist, sollte die Anwendung darauf reagieren, ohne dass ein Neuladen nötig ist. Der change-Listener aus dem globalen Store sorgt genau dafür, dass jede nachfolgende Interaktion, etwa das nächste Öffnen des Mega-Menüs, automatisch die aktualisierte Präferenz respektiert.

Dieses Verhalten lässt sich einfach manuell testen, indem während einer laufenden Sitzung die Systemeinstellung umgeschaltet und anschließend, ohne die Seite neu zu laden, eine animierte Komponente erneut ausgelöst wird. Bleibt die Animation trotz geänderter Einstellung unverändert bestehen, deutet das darauf hin, dass die Präferenz nur einmalig beim Laden gelesen wurde statt über einen Listener beobachtet zu werden.

8. Rechtliche und ethische Relevanz: WCAG 2.3.3 und gesundheitliche Auswirkungen

Das WCAG-Erfolgskriterium 2.3.3, Animation from Interactions, verlangt auf der AAA-Stufe, dass durch Interaktion ausgelöste Bewegungsanimationen deaktiviert werden können, sofern die Animation nicht wesentlich für die Funktion oder die vermittelte Information ist. Auch wenn dieses konkrete Kriterium formal nur auf AAA-Stufe verpflichtend ist, gilt es in der Praxis als anerkannter Best-Practice-Standard, den zunehmend auch Barrierefreiheitsaudits auf AA-Niveau einfordern.

Über den formalen Konformitätsaspekt hinaus geht es hier um echte gesundheitliche Auswirkungen: Für Menschen mit vestibulären Störungen kann eine unpassende Animation zu Schwindel, Übelkeit oder in schweren Fällen zu tagelangen Beschwerden führen, vergleichbar mit den Auslösern, die auch bei Reisekrankheit eine Rolle spielen. Das Respektieren von prefers-reduced-motion ist damit weniger eine Frage der reinen Formalität als eine direkte Frage der Nutzergesundheit.

9. Typischer Fehler: die Präferenz nur beim Laden geprüft statt reaktiv beobachtet

Ein häufiger Fehler ist, matchMedia zwar korrekt beim initialen Laden der Seite abzufragen, jedoch keinen change-Listener zu registrieren, wodurch eine während der Sitzung geänderte Systemeinstellung ignoriert wird. Für einen Nutzer, der die Einstellung gezielt aktiviert, weil eine Animation gerade unangenehm auffällt, bedeutet das, dass die Seite trotz korrekt gesetzter Präferenz weiterhin animiert bleibt, bis ein vollständiger Reload erfolgt.

Ein zweiter, subtilerer Fehler ist, die Präferenz zwar korrekt für x-transition-Animationen zu respektieren, dabei aber CSS-basierte Keyframe-Animationen oder Scroll-Effekte zu übersehen, die außerhalb der Alpine-Direktiven laufen. Da beide Mechanismen unabhängig voneinander funktionieren, muss die Reduzierung konsequent auf beiden Ebenen gleichzeitig umgesetzt werden, nicht nur auf einer davon.

10. Zusammenfassung

11. FAQ: Reduced Motion mit Alpine: Das Wichtigste auf einen Blick