prefers-reduced-motion: Welche Animationen reduziert werden sollten und wie

Worum es geht

prefers-reduced-motion ist ein CSS-Media-Feature, das laut MDN erkennt, ob der Nutzer auf seinem Gerät eine Einstellung für reduzierte Bewegung aktiviert hat. Es hat zwei Werte: no-preference (wertet als falsch) und reduce. Die MDN-Seite selbst weist darauf hin, dass ihr Skalierungsbeispiel für Leserinnen und Leser mit vestibulären Bewegungsstörungen problematisch sein kann – genau diese Gruppe ist es, für die die Einstellung existiert: grosse bewegte, zoomende oder Parallax-Effekte können Schwindel oder Übelkeit auslösen.

Zwei WCAG-Kriterien bilden den Rahmen für diese Verpflichtung. 2.2.2 Pause, Stop, Hide (Stufe A) verlangt eine Möglichkeit, jeden sich bewegenden, blinkenden oder scrollenden Inhalt zu pausieren, zu stoppen oder auszublenden, der automatisch startet, länger als fünf Sekunden dauert und neben anderem Inhalt erscheint. 2.3.3 Animation from Interactions (Stufe AAA) verlangt, dass durch Interaktion ausgelöste Bewegungsanimation deaktiviert werden kann, sofern sie nicht wesentlich ist; als Beispiel dient ein Seitenumblätter-Übergang, der abgeschaltet wird, wenn die Media Query reduce meldet.

Warum es wichtig ist

Die Einstellung ist eine ausdrückliche Anforderung des Nutzers. Sie zu ignorieren macht eine Website für manche Menschen unbenutzbar und für viele weitere unangenehm, die sie aus Gründen des Akkus, der Ablenkung oder der persönlichen Vorliebe aktiviert haben; sie zu respektieren kostet ein paar Zeilen CSS.

So wird es angewendet

• Opt-in bevorzugen: Bewegung in @media (prefers-reduced-motion: no-preference) { … } einschliessen, sodass der Standardzustand ruhig ist und die Animation die Ergänzung darstellt. Alternativ unter (prefers-reduced-motion: reduce) überschreiben.
• Reduzieren, nicht zwingend entfernen. Verschiebungen, Skalierung und Parallax durch Opazitäts-Überblendungen oder sofortige Wechsel ersetzen; kurze Übergänge, die Ursache und Wirkung zeigen (ein sich öffnendes Panel, ein umschaltender Schalter), beibehalten, sofern sie wenig Bewegung beinhalten.
• Unter reduce scroll-behavior: auto statt smooth setzen und automatisch abspielende Hintergrundvideos und Karussells stoppen.
• Die Abfrage im Skript spiegeln: window.matchMedia('(prefers-reduced-motion: reduce)') mit einem change-Listener, und das Ergebnis an Animationsbibliotheken und an Aufrufe von Element.animate() weitergeben.
• Zusätzlich einen Bewegungsschalter innerhalb der Anwendung anbieten; er deckt Nutzer ab, deren Plattform keine solche Einstellung kennt, und erfüllt die Pause/Stopp/Ausblenden-Anforderung von 2.2.2 für automatisch startenden Inhalt.

Stolpersteine

Der pauschale Hack * { animation: none !important; transition: none !important } bricht Code, der auf animationend oder transitionend wartet; das Verkürzen der Dauer auf nahezu null lässt diese Ereignisse weiterhin auslösen. Auch Ladeanimationen sind Bewegung; eine reduzierte Variante (pulsierende Opazität, statischer Text „Wird geladen…") wird weiterhin benötigt. Flackernder Inhalt bleibt ein eigenes Anliegen (WCAG 2.3.1) und wird durch diese Abfrage nicht behoben.