Weniger Bewegung: Animationen mit einer ruhigen Alternative planen

Eine Einstellung respektieren

Die CSS-Medienabfrage „prefers-reduced-motion“ signalisiert, ob Nutzer auf ihrem Gerät weniger nicht notwendige Bewegung wünschen. MDN beschreibt den Wert „reduce“ für diese Präferenz. Eine Website kann darauf reagieren, indem sie Bewegungen reduziert, ersetzt oder entfernt. Die Einstellung bewertet nicht automatisch jede Animation und macht eine Seite allein noch nicht barrierefrei.

Dieser Fachratgeber beschäftigt sich mit einer bestehenden Webfunktion. Für die eigene Gestaltung ist die wichtigste Frage: Welche Information wird durch die Bewegung vermittelt, und wie bleibt sie in einer ruhigen Variante verständlich? Ein Fortschritt darf beispielsweise weiterhin erkennbar sein, auch wenn ein dekorativer Effekt entfällt.

Eine Startseite mit bewegten Karten untersuchen

Stell dir eine Kursübersicht vor, deren Karten beim Scrollen seitlich einfliegen. Die Bewegung soll Aufmerksamkeit schaffen, erklärt aber keinen Kursinhalt. Für dieses Beispiel empfehlen wir eine ruhige Alternative, in der die Karten direkt an ihrer endgültigen Position stehen. Titel, Termine und Links bleiben identisch.

Schreibe im Entwicklungsauftrag ausdrücklich, dass Inhalte nicht erst durch eine beendete Animation sichtbar werden dürfen. Ein Effekt sollte keine Voraussetzung dafür sein, einen wichtigen Knopf erreichen zu können. Für einen Fortschrittszustand braucht es zusätzlich einen lesbaren Text, beispielsweise „Datei wird geprüft“, und anschließend eine echte Erfolgs- oder Fehlermeldung.

Beide Ansichten durchgehen

Prüfe die Seite zunächst mit normaler Bewegungseinstellung. Notiere alle automatisch startenden Effekte, auch kleine Übergänge in Menüs oder Karten. Aktiviere danach die reduzierte Einstellung oder die entsprechende Emulation in deiner Entwicklungsumgebung. Kontrolliere denselben Ablauf erneut, statt nur die Startansicht zu betrachten.

In unserer Kursübersicht sollen sämtliche Karten weiterhin auffindbar sein. Ein geöffneter Filter muss denselben Zustand zeigen. Ein Ladehinweis darf nicht verschwinden, bevor die Liste tatsächlich fertig ist. Wenn das Programm auf das Ende einer Animation wartet, muss dieser Zusammenhang bei der Anpassung geprüft werden. Eine bloße Verkürzung aller Zeiten kann unerwartete Abläufe verdecken.

Mit echten Aufgaben abnehmen

Lass eine Person einen bestimmten Kurs finden, einen Filter ändern und zur Übersicht zurückkehren. Beobachte, ob die ruhige Variante dieselben Informationen und Entscheidungen ermöglicht. Prüfe auch Tastaturfokus und Schriftvergrößerung; Bewegung ist nur ein Teil der Bedienung.

Dokumentiere, welche Effekte dekorativ sind und welche einen Zustand vermitteln. Dadurch können spätere Erweiterungen dieselben Regeln verwenden. Das Ziel ist keine völlig unbewegte Oberfläche um jeden Preis, sondern eine brauchbare Alternative, in der die Aufgabe ohne unnötige visuelle Unruhe erledigt werden kann.