Reduzierte Bewegung

Reduzierte Bewegung ist eine Nutzereinstellung, die jedes moderne Betriebssystem bereitstellt und die signalisiert, dass die betreffende Person keine animierten, Parallax- oder anderweitig bewegungsintensiven Inhalte erhalten möchte. Autorinnen und Autoren erkennen diese Einstellung über die CSS-Media-Query @media (prefers-reduced-motion: reduce).

Wer reduzierte Bewegung benötigt

Mehrere Gruppen von Menschen mit Behinderungen sind von Webanimationen betroffen:

• Vestibuläre Störungen — Schwindel, Morbus Ménière und verwandte Erkrankungen können durch Parallax-Scrollen, große Seitenübergänge, Vollbild-Autoplay-Videos und bestimmte Kameraschwenk-Animationen ausgelöst oder verschlimmert werden. Schwere Episoden können vorübergehend handlungsunfähig machen.
• Migränebetroffene — viele Migränemuster sind aura-bedingt; Bewegung gehört zu den dokumentierten Auslösern.
• Photosensitive Epilepsie — blinkende Inhalte oberhalb des WCAG-Schwellenwerts (mehr als drei Lichtblitze pro Sekunde) können Anfälle auslösen. Die Einstellung für reduzierte Bewegung signalisiert, dass die Person jede Bewegung eingeschränkt haben möchte — auch die unterhalb der Schwelle.
• Konzentrationsstörungen — ADHS und verwandte Erkrankungen machen Umgebungsbewegung (scrollende Laufschriften, endlose Karussells) zu einer erheblichen kognitiven Belastung.

Dies ist eine große Nutzergruppe. Verschiedene Studien beziffern die kombinierte Prävalenz von vestibulären Störungen, Migräne und ADHS auf über 20 % der Erwachsenen an einem bestimmten Punkt in ihrem Leben.

Was das Betriebssystem tut

Alle wichtigen Betriebssysteme bieten in ihren Barrierefreiheitseinstellungen eine Option zur reduzierten Bewegung:

• macOS / iOS — Systemeinstellungen → Bedienungshilfen → Darstellung → Bewegung reduzieren.
• Windows 10/11 — Einstellungen → Barrierefreiheit → Visuelle Effekte → Animationseffekte umschalten.
• Android — Einstellungen → Bedienungshilfen → Animationen entfernen.

Der Browser liest diese Betriebssystemeinstellung und stellt sie CSS zur Verfügung:

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

WCAG-Kriterien

Zwei WCAG-Erfolgskriterien befassen sich gezielt mit Bewegung:

• 2.3.3 Animation durch Interaktionen (AAA, WCAG 2.1+) — durch Nutzerinteraktion ausgelöste Bewegung kann deaktiviert werden, sofern die Bewegung nicht essenziell für die Funktionalität ist. Die Ausnahme für das Essentielle ist eng gefasst: ein CAPTCHA-Timer ist essenziell; eine scroll-getriggerte Karten-Flip-Animation hingegen nicht.
• 2.2.2 Pausieren, Beenden, Ausblenden (A) — jeglicher sich bewegender, blinkender oder automatisch aktualisierender Inhalt, der länger als 5 Sekunden andauert, muss pausierbar, beendbar oder ausblendbar sein. Dies gilt unabhängig von der Nutzereinstellung.

Operative Umsetzung

Eine sinnvolle Basislinie:

1. Die Einstellung erkennen. Die CSS-Media-Query in jedem Stylesheet verwenden, das Animationen hinzufügt.
2. Reduzieren, nicht eliminieren. „Reduziert“ muss nicht „null“ bedeuten; ein 100-ms-Einblenden ist in der Regel vertretbar, wo ein 600-ms-Einfahren es nicht ist.
3. Die Hauptverursacher auditieren. Hero-Parallax, Maus-Tracking-Effekte, Seitenübergangs-Animationen, endlose Scrollbereiche, Autoplay-Videos — das sind die schwerwiegenden Fälle, die einen Fallback für reduzierte Bewegung benötigen.
4. Standardmäßig bewegungsarm. Viele Design-Systeme kehren die Voreinstellung inzwischen um: Animationen werden nur geliefert, wenn sie je Komponente explizit aktiviert werden.