Motion Sensitivity bezeichnet die Empfindlichkeit bestimmter Nutzergruppen gegenüber Bewegungsinhalten auf digitalen Oberflächen; Animationen, Parallax-Scrolling und Autoplay-Videos können bei Menschen mit vestibularen Störungen, Migräne oder photosensitiver Epilepsie schwerwiegende körperliche Reaktionen auslösen.
Rubrik: Mediendesign & Digitale Medien · Unterrubrik: Accessibility · Niveau: Fortgeschritten
Was ist Motion Sensitivity?
Motion Sensitivity beschreibt die erhöhte Empfindlichkeit von Menschen gegenüber visuellen Bewegungsreizen auf Bildschirmen. Während Animationen für viele Nutzerinnen und Nutzer ästhetisch ansprechend oder informativ wirken, können sie für bestimmte Gruppen körperliche Beschwerden auslösen:
- Vestibulare Störungen (z. B. Morbus Menière, Labyrinthitis, vestibuläre Migräne): Das vestibuläre System reguliert Gleichgewicht und Raumorientierung. Bei einem Mismatch zwischen visuellem Input (Bewegung auf dem Bildschirm) und dem Gleichgewichtssinn entstehen Schwindel, Orientierungslosigkeit und Übelkeit.
- Photosensitive Epilepsie: Blinkende Inhalte über bestimmten Frequenzen können epileptische Anfälle auslösen.
- Migräne: Flimmernde oder intensive Bewegungen können Migräneattacken triggern.
Nach Angaben der Vestibular Disorders Association (VEDA) leiden ca. 35 % der Erwachsenen über 40 in den USA an vestibulären Störungen (VEDA, 2023). Die Dunkelziffer bei digitalen Auslösern ist hoch.
Erklärung
WCAG-Anforderungen zu Animationen
Die WCAG – Web Content Accessibility Guidelines im Überblick 2.2 enthalten zwei direkt relevante Kriterien:
2.3.1 Drei Blitze oder darunter (Stufe A): Inhalte dürfen keine Elemente enthalten, die häufiger als dreimal pro Sekunde blinken, wenn der Blitz den allgemeinen Schwellenwert überschreitet. Dies ist die Anti-Epilepsie-Anforderung.
Der Schwellenwert basiert auf der Photosensitive Epilepsy Analysis Tool (PEAT)-Analyse: Inhalte, die im roten Kanal 20 Candela/m² überschreiten und mehr als 25 % des zentralen Sichtfelds ausfüllen, sind kritisch.
2.3.3 Animation durch Interaktion (Stufe AAA): Animationen, die durch Nutzerinteraktion ausgelöst werden, müssen deaktivierbar sein, sofern sie nicht für Funktion oder Information essenziell sind.
Das CSS Media Query prefers-reduced-motion
Das wichtigste technische Instrument für Motion Accessibility ist das CSS Media Query prefers-reduced-motion. Es liest die Betriebssystem-Einstellung des Nutzers aus:
- macOS: Einstellungen > Bedienungshilfen > Anzeige > Bewegung reduzieren
- iOS: Einstellungen > Bedienungshilfen > Bewegungseffekte reduzieren
- Windows: Einstellungen > Bedienungshilfen > Visuelle Effekte > Animationen deaktivieren
- Android: Einstellungen > Bedienungshilfen > Bewegungsminderung (gerätespezifisch)
```css / Standard-Animation / @media (prefers-reduced-motion: no-preference) { .hero-animation { animation: fadeIn 1s ease-in-out; } }
/ Reduzierte Bewegung: Animation entfernen oder minimieren / @media (prefers-reduced-motion: reduce) { .hero-animation { animation: none; / Alternative: einfaches Einblenden statt Bewegungs-Animation / opacity: 1; } } ```
Wichtig: prefers-reduced-motion: reduce bedeutet nicht zwingend keine Animation – es bedeutet reduzierte, weniger intensive Animation. Eine einfache Opacity-Transition ist oft noch akzeptabel; großflächige Parallax-Bewegungen oder spinning-Effekte sollten vollständig entfernt werden.
JavaScript-Erkennung
Für JavaScript-gesteuerte Animationen:
```javascript const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!reducedMotion) { // Aufwendige Animation ausführen startParallaxEffect(); } else { // Alternative: statisches Bild oder minimale Transition showStaticVersion(); } ```
Kategorien problematischer Animationen
Hohes Risiko (bei vestibularen Störungen und Epilepsie):
- Parallax-Scrolling (Vorder- und Hintergrund scrollen mit unterschiedlichen Geschwindigkeiten)
- Autoplay-Videos ohne Pause-Option
- Großflächige Bewegungseffekte über den gesamten Viewport
- Blinkende Elemente (> 3 Hz)
- Infinite Scrolling Loader mit rotierenden Elementen
- Slider/Karusselle mit automatischer Transition
Mittleres Risiko:
- Slide-in-Animationen beim Scrollen (Scroll-triggered Animations)
- Hover-Effekte mit größeren Positionsverschiebungen
- Loading Spinners (bei längerer Exposition)
Niedriges Risiko:
- Einfache Opacity-Transitionen (fade in/out)
- Farbwechsel ohne Bewegung
- Kleine Icon-Animationen
Autoplay-Videos
WCAG 1.4.2 (Audio Control, Stufe A) verlangt, dass automatisch abspielende Audioinhalte (inklusive Videos mit Ton) pausiert, gestoppt oder der Ton deaktiviert werden können. Für bewegte visuelle Inhalte (Videos ohne Ton, GIFs, Animationen) gilt WCAG 2.2.2 (Pause, Stop, Hide, Stufe A): Bewegende, blinkende oder scrollende Informationen, die automatisch starten und länger als 5 Sekunden dauern, müssen pausierbar sein.
GIF-Animationen
Animierte GIFs sind ein häufig übersehenes Problem. Sie können nicht über prefers-reduced-motion kontrolliert werden, da CSS kein GIF-Rendering steuert. Lösungen:
- GIFs durch
<video autoplay loop muted>ersetzen (dann per CSS/JS kontrollierbar) - Statische Fallback-Bilder bereitstellen
- GIF-Abspielen erst nach User-Interaktion starten (statt Autoplay)
Beispiele
Schlechtes Beispiel: Eine Website-Homepage mit großflächigem Parallax-Hintergrundvideo, das automatisch abspielt und sich nicht pausieren lässt. Für Nutzer mit vestibulärer Migräne ist die Seite physisch unerträglich.
Gutes Beispiel:
```css .parallax-hero { background-attachment: fixed; / Parallax-Effekt / }
@media (prefers-reduced-motion: reduce) { .parallax-hero { background-attachment: scroll; / Normales Scrollen ohne Parallax / } } ```
In der Praxis
Im Mediendesign empfiehlt sich die Regel: Animation ist eine Ergänzung, keine Voraussetzung. Die Grundfunktion eines UI muss auch ohne jede Animation vollständig nutzbar sein. Animation dient der Orientierung (Transitionen zeigen, wo man sich bewegt), dem Feedback (Button-Reaktion) und der Ästhetik – aber nie der einzigen Informationsübermittlung.
Praktischer Test: Design mit prefers-reduced-motion: reduce im Browser simulieren (Chrome DevTools > Rendering > Emulate prefers-reduced-motion) und prüfen, ob alle Inhalte weiterhin korrekt und verständlich sind.
Vergleich & Abgrenzung
Motion Sensitivity vs. Photosensitive Epilepsie: Epilepsie wird durch schnelles Blinken ausgelöst (WCAG 2.3.1). Motion Sensitivity betrifft langsame, großflächige Bewegungen, die das vestibuläre System überfordern. Beides erfordert Maßnahmen, aber unterschiedliche.
`prefers-reduced-motion` vs. `prefers-contrast`: prefers-reduced-motion steuert Animation; prefers-contrast steuert Farbkontraste für Nutzer mit Kontrastpräferenzen. Beides sind CSS Media Queries für Nutzereinstellungen.
Häufige Fragen (FAQ)
Muss ich alle Animationen entfernen, wenn `prefers-reduced-motion: reduce` gesetzt ist? Nein. Das Ziel ist, die Intensität und das Ausmaß zu reduzieren. Kleine, nicht-räumliche Übergänge (Opacity, Farbe) sind meist unproblematisch.
Sind animierte Ladebalken (Progress Bar) problematisch? In der Regel nicht, wenn sie klein sind und keine großflächige Bewegung erzeugen. Unendlich rotierende Spinner sind problematischer als lineare Progress Bars.
Verwandte Einträge
- WCAG – Web Content Accessibility Guidelines im Überblick
- POUR-Prinzipien – Wahrnehmbar, Bedienbar, Verständlich, Robust
- Accessibility – Grundlagen digitaler Barrierefreiheit
- Accessibility Testing – Tools & Methoden (axe, WAVE, Lighthouse)
- Untertitel & Captions – SDH, CC und offene vs. geschlossene Untertitel
Weiterführend
- W3C WAI: Understanding Success Criterion 2.3.1: Three Flashes or Below Threshold. WCAG 2.2, 2023.
- Vestibular Disorders Association (VEDA): Vestibular Disorders and Digital Media. 2023.
- Cassidy, Val: Designing for Vestibular Disorders. A List Apart, 2020.
- Hogue, Andrew: Photosensitive Epilepsy Analysis Tool (PEAT). Trace Center, 2012.
- Eric Bailey: prefers-reduced-motion: The ultimate guide. CSS-Tricks, 2022.
