Barrierefreiheit

Animationen ohne Reduced-Motion-Alternative

Üblicher Schweregrad: niedrig · Aufwand: gering

Woran du es erkennst

Die Seite nutzt CSS-Animationen oder -Übergänge, aber kein Stylesheet berücksichtigt die Media-Query prefers-reduced-motion — Bewegung läuft auch dann, wenn Nutzer sie im System abgeschaltet haben.

Warum es zählt

Starke Bewegung kann bei Menschen mit Vestibularstörungen Schwindel und Übelkeit auslösen; wer im Betriebssystem „Bewegung reduzieren" aktiviert, erwartet, dass Websites das respektieren. Es zu ignorieren ist ein Barrierefreiheits-Problem (WCAG 2.3.3 / 2.2.2) und wirkt rücksichtslos.

So behebst du es

  1. Wickle große Animationen und Parallax-Effekte in @media (prefers-reduced-motion: no-preference) { ... }, statt sie nachträglich abschalten zu müssen.
  2. Definiere im Reduced-Motion-Zweig kurze, dezente Alternativen (z. B. einfaches Einblenden statt Flugbewegung) statt alles abrupt einzufrieren.
  3. Stoppe automatisch laufende Slider/Videos bei prefers-reduced-motion oder gib ihnen eine sichtbare Pause-Schaltfläche.
  4. Teste die Seite mit aktivierter Systemeinstellung „Bewegung reduzieren" (macOS/iOS/Windows) und prüfe, ob nichts mehr ruckelt oder fliegt.

Zum Nachlesen