prefers-reduced-motion: Animationen ohne Schwindel

Das Gleichgewichtssystem des Menschen sitzt im Innenohr und meldet dem Gehirn permanent, wie der Körper im Raum steht und sich bewegt. Es arbeitet eng mit den Augen zusammen: Was wir sehen, gleicht das Gehirn mit dem ab, was das Innenohr meldet. Genau an dieser Schnittstelle entsteht das Problem. Wenn eine Website großflächige Bewegung zeigt - ein Hintergrund, der sich beim Scrollen verschiebt, ein Element, das quer über den Bildschirm fliegt -, signalisieren die Augen dem Gehirn eine Bewegung, die der Körper nicht spürt. Dieser Widerspruch ist derselbe Mechanismus, der Reise- und Seekrankheit auslöst. Bei empfindlichen Menschen genügen schon wenige Sekunden, um Schwindel, Übelkeit, Kopfschmerzen oder Desorientierung hervorzurufen.

Wie verbreitet die Empfindlichkeit ist, wird oft unterschätzt. Rund 35 Prozent (NHANES, 2001-2004) der Erwachsenen ab 40 zeigen in standardisierten Gleichgewichtstests eine vestibuläre Funktionsstörung, und die Prävalenz steigt mit dem Alter deutlich an. Bemerkenswert ist, dass 32 Prozent (NHANES, 2001-2004) dieser Altersgruppe betroffen sind, ohne jemals bewusst Schwindel verspürt zu haben - die Störung bleibt unbemerkt, bis ein Auslöser sie sichtbar macht. Eine aufwendig animierte Startseite kann genau ein solcher Auslöser sein. Hinzu kommen Menschen mit Migräne, Folgen einer Gehirnerschütterung oder bestimmten neurologischen Erkrankungen, für die Bewegung auf dem Bildschirm ein unmittelbares Symptom hervorruft. Barrierefreiheit bedeutet hier nicht Verzicht, sondern Wahlfreiheit: Wer empfindlich ist, soll die Bewegung abstellen können, ohne den Inhalt zu verlieren. Wie eng dieses Ziel mit anderen Prüfpunkten zusammenhängt, zeigt der Beitrag zu den BFSG-Anforderungen.

Moderne Betriebssysteme bieten seit Jahren eine Einstellung, mit der Nutzer Bewegung systemweit reduzieren können - unter macOS und iOS heißt sie Bewegung reduzieren, unter Windows Animationen anzeigen, unter Android Animationen entfernen. Wer diese Option aktiviert, signalisiert ein klares Bedürfnis. Die CSS-Media-Query prefers-reduced-motion macht dieses Signal für die Website lesbar. Sie kennt zwei Zustände: no-preference für den Normalfall und reduce, sobald der Nutzer die Systemeinstellung aktiviert hat. Der empfohlene Ansatz ist, aufwendige Bewegung als Erweiterung zu behandeln und sie im reduce-Zweig gezielt zurückzunehmen, statt Animationen pauschal überall einzubauen und mühsam wieder zu entfernen.

Diese Regel ist bewusst defensiv: Sie setzt Animations- und Übergangsdauern praktisch auf null und stoppt endlose Wiederholungen, statt Bewegung hart abzuschneiden, was eigene Probleme verursachen kann. In der Praxis ist ein feineres Vorgehen oft besser - etwa ein sanfter Fade dort, wo im Normalzustand ein Element einfliegt. Wichtig ist, dass die Media-Query breit unterstützt wird und keine Ausrede für ihr Fehlen bleibt: 50 Prozent (Web Almanac, 2024) der mobilen Websites berücksichtigen prefers-reduced-motion bereits, ein deutlicher Sprung von 34 Prozent (Web Almanac, 2024) im Jahr 2022. Die Technik ist reif, breit unterstützt und kostet in der Umsetzung wenig.

Für automatisch startende Bewegung reicht prefers-reduced-motion allein nicht aus, denn nicht jeder empfindliche Nutzer hat die Systemeinstellung aktiviert. Kriterium 2.2.2 verlangt deshalb einen sichtbaren, bedienbaren Mechanismus, mit dem sich laufende Bewegung anhalten lässt - konkret für alles, was länger als fünf Sekunden dauert, automatisch startet und parallel zu anderem Inhalt läuft. Der klassische Fall ist das Bildkarussell auf der Startseite. Ein Pause-Knopf ist hier kein Zusatz, sondern Pflicht, und er muss mehr sein als ein dekoratives Symbol: Er braucht eine erreichbare Beschriftung, muss per Tastatur bedienbar sein und seinen Zustand an assistive Technik melden.

Dieselbe Logik gilt für andere autostartende Elemente: Ticker, Laufschriften, animierte Statistiken und selbstöffnende Dialoge. Überall dort, wo Bewegung ohne Zutun des Nutzers beginnt, muss es einen Weg geben, sie zu stoppen. Bei Dialogen und Overlays kommt hinzu, dass ihr Erscheinen selbst eine Bewegung sein kann; wie sich diese Muster zugänglich gestalten lassen, vertieft der Beitrag zu barrierefreien Modals und Overlays. Der gemeinsame Nenner ist Kontrolle: Der Nutzer, nicht die Animation, bestimmt das Tempo.

Ob Animationen die Anforderungen erfüllen, lässt sich nicht allein automatisiert prüfen. Ein Scanner erkennt zwar, ob eine prefers-reduced-motion-Regel im Stylesheet vorhanden ist, beurteilt aber nicht, ob sie an den richtigen Stellen greift oder ob ein Autostart-Slider einen bedienbaren Pause-Knopf besitzt. Deshalb gehört ein Motion-Audit in die manuelle Prüfung: Die Seite wird einmal mit aktivierter und einmal mit deaktivierter Systemeinstellung durchgegangen, alle automatisch startenden Elemente werden auf einen Stopp-Mechanismus geprüft, und großflächige Bewegung wird gezielt auf Auslöser hin untersucht. Genau dieses Vorgehen ist Teil eines vollständigen WCAG-Audits und ergänzt die klassischen Prüfpunkte wie Kontrast und Struktur.

Der Zusammenhang reicht über die reine Pflichterfüllung hinaus. Ruhige, kontrollierbare Bewegung verbessert die Nutzbarkeit für alle und zahlt zugleich auf Ladeleistung und Auffindbarkeit ein - ein Effekt, den der Beitrag zu Barrierefreiheit und SEO als doppeltem Hebel ausführt. Auch stark regulierte Angebote profitieren: Ein barrierefreies Online-Banking etwa muss in kritischen Momenten wie der Zahlungsfreigabe frei von ablenkender oder schwindelauslösender Bewegung sein. Wie wir Bewegung, Kontrast und Struktur gemeinsam in Projekten umsetzen, zeigen unsere Referenzfelder. So wird aus einer technischen Detailfrage ein spürbarer Gewinn an Zugänglichkeit - für die rund 35 Prozent (NHANES, 2001-2004) der Erwachsenen ab 40 mit vestibulärer Empfindlichkeit ebenso wie für alle, die es einfach ruhiger mögen.