Bewegung und Animation

Warum Bewegung ein Barriere-Thema ist

Animation wirkt auf den ersten Blick wie reine Kür – ein bisschen Politur auf einer ohnehin funktionierenden Oberfläche. Für einen Teil der Nutzer:innen ist sie aber das Gegenteil von Politur: ein echtes Hindernis.

Am deutlichsten betrifft das Menschen mit einer vestibulären Störung – also Beeinträchtigungen des Gleichgewichtsorgans im Innenohr. Großflächige Bewegung auf dem Bildschirm, etwa ein Inhalt, der beim Scrollen mit anderer Geschwindigkeit mitfährt (Parallax-Effekt), kann bei ihnen Schwindel, Übelkeit oder Kopfschmerz auslösen – körperliche Reaktionen, nicht bloß Unbehagen.

Bewegung trifft aber noch weitere Gruppen. Menschen mit Migräne reagieren auf großflächige Parallax-Effekte oft mit Anfällen – dieser Zusammenhang wird in der DACH-Fachliteratur ausdrücklich genannt (Domingos de Oliveira, netz-barrierefrei.de). Autistische Menschen erleben dauerhafte Bewegung teilweise als sensorische Überlastung. Menschen mit Aufmerksamkeitsstörungen werden von ständig laufenden Animationen vom eigentlichen Inhalt abgezogen – das Auge wird automatisch von Bewegung angezogen, auch wenn man eigentlich woanders hinschauen möchte. Und blinkende oder blitzende Inhalte können bei Menschen mit photosensibler Epilepsie im schlimmsten Fall einen Anfall auslösen. Das ist keine Randerscheinung, sondern der Grund, warum gleich mehrere Erfolgskriterien der Web Content Accessibility Guidelines (WCAG) sich mit Bewegung befassen.

Die drei WCAG-Kriterien zu Bewegung

Drei Erfolgskriterien der WCAG 2.2 regeln den Umgang mit Bewegung. Zwei davon stehen auf der Stufe A – der untersten und damit am striktesten verbindlichen Konformitätsstufe –, eines auf der nicht verpflichtenden Stufe AAA.

Die drei WCAG-Kriterien zu Bewegung und Animation

Kriterium	Stufe	Was es fordert
2.2.2 Pausieren, Stoppen, Ausblenden	A	Bewegte, blinkende oder automatisch aktualisierte Inhalte, die automatisch starten, länger als 5 Sekunden laufen und parallel zu anderem Inhalt stehen, brauchen eine Möglichkeit zum Pausieren, Stoppen oder Ausblenden.
2.3.1 Grenzwerte für Blitzen	A	Nichts auf der Seite blitzt mehr als dreimal pro Sekunde – oder das Blitzen bleibt unter den definierten Helligkeits- und Flächen-Grenzwerten.
2.3.3 Animation durch Interaktionen	AAA	Bewegungs-Animation, die durch eine Interaktion ausgelöst wird (etwa beim Scrollen), lässt sich abschalten – außer die Animation ist für Funktion oder Information wesentlich.

2.2.2 – die Kontroll-Pflicht

Kriterium  2.2.2 „Pausieren, Stoppen, Ausblenden“ ist das wichtigste der drei, weil es auf Stufe A steht und damit praktisch immer gilt. Ein typischer Fall: ein automatisch durchlaufender Bilderkarussell-Slider auf der Startseite. Läuft er länger als fünf Sekunden und startet er von selbst, müssen Nutzer:innen ihn anhalten können. Die Fünf-Sekunden-Grenze ist dabei kein Freibrief für die ersten fünf Sekunden Zappeln – sie zieht die Grenze zwischen einer kurzen Einblende-Animation und einem dauerhaft störenden Element.

2.3.1 – die Anfall-Vermeidung

Kriterium  2.3.1 „Grenzwerte für Blitzen“ schützt vor photosensiblen Anfällen. Die Faustregel: nichts blitzt mehr als dreimal pro Sekunde. Für die meisten Projekte ist das unkritisch – problematisch wird es bei Video-Inhalten, animierten GIFs oder aufwendigen Effekten. Im Zweifel hilft ein spezialisiertes Prüfwerkzeug, das Videomaterial auf gefährliche Blitzsequenzen analysiert.

2.3.3 – die Interaktions-Animation

Kriterium  2.3.3 „Animation durch Interaktionen“ adressiert genau die vestibulär kritischen Effekte: Bewegung, die nicht von selbst, sondern durch eine Nutzer:innen-Aktion entsteht – allen voran Parallax- und große Übergangs-Animationen beim Scrollen. Es steht auf Stufe AAA und ist damit formal nicht verpflichtend. Trotzdem lohnt es sich, es zu beachten: Der technische Aufwand ist gering, der Nutzen für Betroffene groß.

prefers-reduced-motion: was es ist – und was nicht

Moderne Betriebssysteme bieten eine Einstellung „Bewegung reduzieren“. Wer sie aktiviert, signalisiert: Bitte weniger Animation. Im Web lässt sich dieser Wunsch direkt auslesen – über die CSS-Abfrage prefers-reduced-motion . Eine Seite kann damit ihre Animationen gezielt zurücknehmen, sobald jemand diese Einstellung gesetzt hat. Genau dieses Schema nutzt übrigens auch die Seite, die du gerade liest.

Wichtig ist das Wort reduzieren. Die Einstellung heißt nicht „keine Bewegung“, sondern „weniger Bewegung“. Eine kurze, ruhige Ein-/Ausblende-Animation ist meist unkritisch und darf bleiben – kritisch sind die großen, raumgreifenden Effekte: weite Wege, schnelle Bewegung, Parallax, Zoom. Diese werden bei reduzierter Bewegung durch eine ruhige Alternative ersetzt, etwa eine schlichte Überblendung.

Wann Bewegung hilft, wann sie schadet

Bewegung ist nicht per se schlecht. Richtig eingesetzt, unterstützt sie das Verständnis. Falsch eingesetzt, stört oder schadet sie. Die Grenze verläuft ungefähr so:

Bewegung, die hilft

• Orientierung: Ein Element gleitet sichtbar an seinen Platz, statt abrupt zu erscheinen – das erklärt, woher es kommt.
• Rückmeldung: Ein Button reagiert auf den Klick, ein Ladevorgang zeigt Fortschritt. Kleine, kurze Signale.
• Zusammenhang: Ein sanfter Übergang zeigt, dass zwei Zustände zusammengehören – etwa beim Aufklappen eines Menüs.

Bewegung, die schadet

• Dauerschleife: Etwas bewegt sich endlos, ohne Funktion – ein ständig pulsierendes Element zieht Aufmerksamkeit ab.
• Großflächige Scroll-Effekte: Parallax und weite Bewegungen beim Scrollen sind der häufigste vestibuläre Auslöser.
• Automatisch und unkontrollierbar: Inhalt, der von selbst startet und sich nicht anhalten lässt – der klassische Verstoß gegen Kriterium 2.2.2.

Drei Stufen der Anpassung

Wer das Thema sauber strukturieren möchte, kommt mit drei Kategorien weit. Das Modell stammt vom Design-System-Team von Mercado Libre (Oriana García, Smashing Magazine 2023) und hat sich in der Praxis bewährt:

1. Animation ohne Bewegung – unverändert lassen. Farbwechsel beim Hover, Opacity-Übergänge, das Einfärben eines aktiven Buttons. Diese Effekte verändern keine Position und sind für alle Nutzer:innen unkritisch. Sie laufen auch bei reduzierter Bewegung genau gleich weiter.
2. Nicht-essenzielle Bewegung – ersetzen durch sofortigen Wechsel. Card-Flips, Parallax, Hintergrund-Animationen, automatisch laufende Karussells, morphende Illustrationen, Zoom-Effekte. Bei reduzierter Bewegung wird die Animation weggelassen – der Zielzustand erscheint ohne Übergang.
3. Essenzielle Bewegung – verlangsamen, nicht weglassen. Eine Lade-Anzeige, die den Nutzer:innen sagt „etwas passiert gerade“, ist funktionell und darf nicht verschwinden. Bei reduzierter Bewegung wird sie ruhiger: langsamer, ohne Größen-Pulsieren, oft mit fester Maximaldauer.

Wichtig: Reduzieren heißt nicht entfernen. Der CSS-Experte Eric Bailey hat darauf hingewiesen, dass ein pauschales Abschalten aller Übergänge oft mehr kaputt macht, als es hilft – manche Komponenten brauchen eine sichtbare Veränderung, damit Nutzer:innen sie verstehen. Die drei Kategorien helfen, jeweils die passende Reaktion zu wählen.

So sieht das in der Praxis aus

Die beiden Demos unten zeigen die Kategorien 2 und 3 nebeneinander. Über den Schalter kannst du die Anpassung umschalten und siehst direkt, wie sich die Animation verändert. Wenn dein Betriebssystem auf „Bewegung reduzieren“ steht, ist der reduzierte Modus von Anfang an aktiv.

Was du konkret tun kannst

• Automatische Dauer-Bewegung vermeiden. Wo sie sich nicht vermeiden lässt, gehört eine sichtbare Pause-/Stopp-Steuerung dazu (Kriterium 2.2.2).
• Blitzendes prüfen. Video- und Effekt-Inhalte auf Blitzsequenzen kontrollieren – nichts blitzt häufiger als dreimal pro Sekunde (Kriterium 2.3.1).
• prefers-reduced-motion abfragen. Große, raumgreifende Effekte bei aktiver Einstellung durch ruhige Alternativen ersetzen – kleine, ruhige Übergänge dürfen bleiben.
• Parallax mit Bedacht. Scroll-gekoppelte Bewegung ist der häufigste vestibuläre Auslöser – sie sollte immer abschaltbar sein.
• Bewegung mit Funktion verbinden. Jede Animation sollte etwas erklären: Orientierung, Rückmeldung, Zusammenhang. Bewegung ohne Zweck ist im Zweifel Bewegung zu viel.
• Kontrast über alle Animationszustände prüfen. Wenn sich Hintergründe ändern – etwa bei Übergängen oder hover-Effekten – muss der Text-Kontrast in jedem Zwischenzustand mindestens 4,5:1 bleiben (Domingos de Oliveira nennt das als häufig übersehenen Stolperstein).
• Trigger-Warnung, wenn die Animation nicht abschaltbar ist. Eingebettete Drittinhalte oder essenzielle Animationen, die sich nicht über prefers-reduced-motion deaktivieren lassen, verdienen einen sichtbaren Hinweis vor der Animation – mit mindestens fünf Sekunden Vorlauf oder einer manuellen Auslöser-Aktion.

Gute Animation merkt man kaum – sie macht eine Oberfläche ruhiger verständlich, statt sie zu beleben. Und sie fragt zuerst, ob die Person vor dem Bildschirm Bewegung überhaupt sehen möchte.