Das Problem
Animationen und Videos gehören heute zum Standard moderner Websites. Sie erklären, führen, emotionalisieren und erhöhen oft die Verweildauer. Gleichzeitig sind sie einer der häufigsten Gründe, warum Seiten für einen Teil der Nutzer nicht oder nur eingeschränkt nutzbar sind.
Bewegte Inhalte können Schwindel, Übelkeit, Konzentrationsprobleme oder Stress auslösen, etwa bei Menschen mit vestibulären Störungen, neurologischer Sensitivität oder Aufmerksamkeitsbeeinträchtigungen.
Genau deshalb behandeln die WCAG-Richtlinien Bewegung nicht als rein gestalterisches Thema, sondern als potenzielles Zugänglichkeitsproblem mit klaren technischen Anforderungen, etwa zur Dauer, zur Steuerbarkeit und zur Berücksichtigung von Systemeinstellungen wie „Bewegung reduzieren“.
Beispiele problematischer Animationen
Auto-Play ohne Nutzerinteraktion: Du hast ein Firmenvideo eingebunden, das automatisch startet. Das ist kritisch, weil Bewegung ohne Vorwarnung Aufmerksamkeit bindet, vom Inhalt ablenkt und bei empfindlichen Nutzern Unruhe oder Schwindel auslösen kann. Außerdem fehlt die Kontrolle, insbesondere wenn Einstellungen wie „Bewegung reduzieren“ ignoriert werden.
Großflächige Bewegungen im sichtbaren Bereich: Du nutzt einen Animationseffekt im Hero-Bereich einer Seite über den vollen Bildschirm.
Das ist kritisch, weil großflächige Bewegung kaum ausgeblendet werden kann, permanent im Blickfeld bleibt und damit Lesen, Orientierung und Konzentration stört. Für bewegungssensible Nutzer kann das schnell überfordernd oder sogar körperlich belastend werden.
Dauerhafte oder endlose Animationen: Animationen, die nicht automatisch stoppen, halten die visuelle Reizquelle dauerhaft aktiv, lenken kontinuierlich vom Inhalt ab und geben dem Nutzer keine Möglichkeit, zur Ruhe zu kommen. Ohne Stopp- oder Pausenoption wird aus Gestaltung schnell eine dauerhafte Barriere.
Schnell wechselnde Szenen, Zooms oder Kamerafahrten: Du nutzt gezielt diese Effekte, um Nutzer zu gewünschten Handlungen zu verführen, um ihre Aufmerksamkeit zu erhaschen. Das kann problematisch sein, wenn dadurch visuelle Überreizung entsteht, die Orientierung verloren geht oder bewegungssensible Personen mit Schwindel, Unruhe oder Stress reagieren. Aufmerksamkeit durch Überforderung zu erzwingen steht im direkten Konflikt mit zugänglicher Nutzerführung.
Flackernde oder blitzende Inhalte: Animationen, die mehr als 3x / Sekunde stark aufleuchten, führen bei dafür anfälligen Personen zu neurologischen Reaktionen bis hin zu epileptischen Anfällen und gelten deshalb als besonders gefährlich. Auch bei nicht betroffenen Nutzern wirken solche Effekte extrem belastend und sollten grundsätzlich vermieden werden.
Unkontrollierbare Hintergrundanimationen: Auch Hintergründe werden gerne animiert. Jedoch stehen nicht sämtliche Kontrollmöglichkeiten zur Verfügung. Hier gilt es darauf zu achten, dass sie nicht automatisch starten, nicht dauerhaft laufen und sich respektvoll an Systemeinstellungen wie „Bewegung reduzieren“ halten. Hintergrund darf niemals wichtiger oder aufdringlicher sein als der eigentliche Inhalt.
Bewegte Inhalte, die trotz „Bewegung reduzieren“ trotzdem automatisch starten: Das ist kritisch, weil hier ein explizites Nutzersignal ignoriert wird, das auf Bewegungs-Sensitivität hinweist. Wer „Bewegung reduzieren“ aktiviert, erwartet zu Recht, dass automatische Animationen und Videos unterdrückt werden. Andernfalls wird aus Komforteinstellung eine wirkungslose Kulisse.
Barrierefreie Gestaltung von Animationen
Videos & Animationen, die länger als 5 Sekunden andauern, sollten steuerbar sein. Das heißt, sie sollten pausiert oder gestoppt werden können.
Wenn Nutzer über den Browser die Einstellung „reduzierte Bewegungen“ aktiviert haben, dann muss das beachtet werden. Videos & Animationen dürfen dann nicht automatisch starten, insbesondere wenn sie länger als 5 Sekunden andauern, besonders großflächig sind und starke Reize auslösen. Im CSS deiner Seite kann dies sichergestellt werden:
@media (prefers-reduced-motion: reduce) { animation: none; }
Bei einfachen blitzartigen Animationen heißt es rechnen: Bei blinkartigen Effekten zählt jeder starke Hell-Dunkel-Wechsel. Enthält ein Animationszyklus zwei Wechsel (an/aus/an), darf der Zyklus nicht kürzer als ca. 500 ms sein, sonst werden mehr als 3 Blitze pro Sekunde erreicht. In der Praxis sollte man solche Effekte aber grundsätzlich vermeiden, statt sie knapp unter Grenzwerte zu optimieren.
Die Rolle von Kontextfaktoren
Bei all diesen harten Vorgaben, gibt es Umstände, die eine Abschwächung der Regeln erlauben. Dazu gehören:
- Größe der Animation: Ist es eine kleine, mittlere oder sehr große Fläche, die animiert wird?
- Klickbare Animationen: Ist die Animation im Ausgangsstadium inaktiv und startet erst auf Klick?
- Stärke der Animation: Ist die Animation überhaupt so gestaltet, dass sie Schwindel / Übelkeit z.B. durch starke kontrastierende und Schnelligkeit auslöst? Oder handelt es sich um eine ruhige, langsam, subtilere Animation?
- Automatisches Ende: Endet die Animation nach x Sekunden?
Unter Abwägung dieser Faktoren lässt sich für jede Animation, die richtige Entscheidung fällen, die nachvollziehbar und begründbar ist.
Warum ist eine Hover-Animation für einen Klick-Button in der Regel in der Regel komplett unproblematisch?
Weil der Nutzer jederzeit die Kontrolle über die Animation hat (er kann die Mouse vom Button wegziehen), weil die Animation kontrolliert startet und automatisch endet und weil selbst bei einem blitzartigen Farbwechsel unter 3 Blitzen pro Sekunde bleibt. Daher sind solche Effekte per se barrierefrei.
Erst wenn der Nutzer die Kontrolle über die Animation selbst verliert und ihr permanent ausgesetzt ist, wird es verpflichtend, Steuerungselemente einzuführen.
Bei Übertreibung von Effekten, die zu den eingangs genannten „Nebenwirkungen“ führen können, gibt es wenig Toleranz. Hier muss der Effekt abgeschwächt werden. Betrifft es aber nur kleine Flächen und haben die Nutzer über Steuerelemente Möglichkeiten zu reagieren, so kann auch mit einem kleinen Warnhinweis gearbeitet werden. So ist es für Videos mit stroboskopischen Effekten verpflichtend eingangs zum Video einen Warnhinweis einzublenden.
Wenn außerdem das Nutzersignal wie das „reduzierte Bewegungen“ im Browser gesetzt ist, muss das automatische Abspielen von Animationen verhindert werden.
Kleiner Leitfaden
- Startet die Animation / Video automatisch?
wenn ja –> kritisch - Ist die Animation > 5s
wenn ja –> kritisch - Wie groß ist die Fläche, die animiert wird (klein, mittel, groß)?
wenn groß –> kritisch - Wie ist die Animation geartet? Enthält sie Blitze?
wenn ja –> kritisch - Ist sie funktional notwendig?
wenn ja –> Alternativen bereitstellen, wenn kritisch - Browsereinstellung „Bewegung redzieren“ respektieren –> kein Autostart
