SC 2.3.3 Stufe AAA WCAG 2.1

Animation durch Interaktionen

Bewegungsanimationen, die durch Interaktionen ausgelöst werden, können von Nutzenden deaktiviert werden, sofern die Animation nicht essenziell ist. Die Media-Query `prefers-reduced-motion` ist zu berücksichtigen.

Was gefordert wird

Bewegungsanimationen, die durch Nutzerinteraktion ausgelöst werden — Parallax-Scrollen, Seitenübergänge, durch Hover gestartete Zoom-Effekte, scroll-gesteuerte Einblendungen — müssen deaktivierbar sein, wenn die nutzende Person reduzierte Bewegung anfordert, es sei denn, die Animation ist für die vermittelte Funktion oder Information essenziell.

Der Standardmechanismus ist die CSS-Media-Query prefers-reduced-motion: reduce, die die auf Betriebssystemebene verfügbare Einstellung zur Bewegungsreduzierung ausliest, die macOS, Windows, iOS und Android alle bereitstellen.

So wird das Kriterium erfüllt

Jede bedeutsame Bewegung (Transformationen, große Verschiebungen, Parallax, Seitenübergänge, scroll-gekoppelte Animationen) ist in @media (prefers-reduced-motion: no-preference) einzuschließen.
Bei JavaScript-gesteuerten Animationen (GSAP, Framer Motion, Lottie) ist window.matchMedia('(prefers-reduced-motion: reduce)').matches zu prüfen und die Animation entweder zu überspringen oder durch einen sofortigen Zustandswechsel zu ersetzen.
Kritische Feedback-Animationen (Ladespinner, Drag-Vorschauen) dürfen bei aktivierter Bewegungsreduzierung mit geringerer Intensität weiterlaufen — sie vermitteln Funktion, keinen Schmuck.
Tests mit macOS Systemeinstellungen → Bedienungshilfen → Anzeige → Bewegung reduzieren sowie den entsprechenden Einstellungen unter Windows, iOS und Android sind durchzuführen.

Häufige Fehler

Marketingseiten mit Parallax-Scrollen, die die Bewegungsreduzierungs-Einstellung des Betriebssystems ignorieren.
Seitenübergangs-Bibliotheken (Barba.js, Astro View Transitions in älteren Konfigurationen), die unabhängig von der Nutzerpräferenz große Verschiebungen animieren.
Card-Hover-Effekte mit langen translateY-Übergängen, die bei Personen mit vestibulären Erkrankungen Beschwerden verursachen.
Scroll-ausgelöste Animationen auf langen Seiten, die beim Scrollen Dutzende Bewegungseffekte auslösen — besonders im Zusammenspiel störend.
Lottie-Animationen in Onboarding-Flows, die Vollbild-Bewegung ohne Prüfung der Präferenz abspielen.

axe und Lighthouse erkennen Fehler bei der Bewegungsreduzierung nicht zuverlässig, aber das Barrierefreiheits-Audit von Lighthouse enthält in neueren Versionen eine Prüfung für prefers-reduced-motion, und viele Design-System-Linter setzen es inzwischen durch.

Warum es wichtig ist

Vestibuläre Störungen — Ménière-Krankheit, vestibuläre Migräne, Post-Commotio-Syndrom, persistierende postural-perzeptuelle Schwindel (PPPD) — können durch große oder unerwartete Bewegungen auf dem Bildschirm verschlimmert werden. Die Folge ist reale körperliche Übelkeit oder Schwindel, kein bloßes Unbehagen. Die Berücksichtigung von prefers-reduced-motion ist eine der kostengünstigsten und wirkungsstärksten Verbesserungen der Barrierefreiheit, und die Betriebssystemeinstellung bedeutet, dass die nutzende Person bereits mitgeteilt hat, was sie benötigt.