Unter Animationen und Bewegungen verstehe ich jede Form von Bewegung, die von der Nutzerin nicht intendiert ist. Wenn ich scrolle oder etwas anklicke, kann ich eine Reaktion erwarten. Wenn ich aber nichts tue, sollte sich auch nichts bewegen.
Häufig zu finden sind von selbst abspilende Videos und Audios, durchtickende Bilder-Galerien, seltener auch dynamische Newsticker. Außerdem gehören auch Animationen via GIF, SVG und andere Technologien dazu. Einfache Effekte wie Veränderung einer Farbe oder Form bei Mausover sind Teil einer grafischen Benutzeroberfläche und gehören nicht zu den zu vermeidenden Animationen.
Hinweis: Wenn nicht anders beschrieben, handelt es sich um Pflicht-Kriterien. AAA-Kriterien entsprechen der höchsten Stufe der Barrierefreiheit und müssen in der Regel nicht flächendeckend auf einer gesamten Website umgesetzt werden.

Wichtige Zielgruppen

Im Wesentlichen gibt es drei Gruppen, für die das Thema relevant sein kann:

• Epileptiker:Innen
• Autist:Innen
• Personen mit weiteren Anfalls-Erkrankungen, dazu können etwa Migräne-Erkrankte gehören

Das Thema epileptische Anfälle und Trigger für Autist:Innen ist weitgehend bekannt. Die Betroffenen können durch ständige Bewegung oder Blitzen/Flackern getriggert werden bzw. Anfälle bekommen.
Die dritte Gruppe wird seltener genannt: Effekte wie Parallax können bei einigen Personen Migräne und vielleicht noch andere Dinge auslösen.
Last not least sind Bewegungen ein stetiger Punkt der Ablenkung. Auch wenn wir woanders hinschauen, wird das Auge durch Bewegung angelockt. Das kann für Menschen mitADHS relevant sein.
Die für das Thema wichtigen Anforderungen finden wir vor allem in der Guideline 2.3 Seizures and Physical Reactions. Schauen wir uns das einmal genauer an.

2.3.1 Three Flashes or Below Threshold und 2.3.2 Three Flashes

Diese Erfolgskriterien besagen, dass Blitzen und Flackern mit einer Häufigkeit von mehr als drei Mal pro Sekunde nicht erlaubt sind.
2.3.1 erlaubt Blitzen und Flackern auf einer sehr kleinen Fläche oder wenn sie schwach ausgeprägt sind. 2.3.2 ist ein AAA-Erfolgskriterium und erlaubt kein Blitzen oder Flackern für mehr als 3 Mal pro Sekunde, auch wenn es nur um ein einzelnes Pixel geht.
Das gilt auch für Inhalte innerhalb von Videos. Es gibt das berühmte Beispiel eines japanischen Zeichentrickfilms, der bei tausenden von Kindern epileptische Anfälle ausgelöst hat. Das Thema muss also auch bei der Konzeption von Videos beachtet werden.

2.2.2 Pause, Stop, Hide

Dieses AA-Kriterium bezieht sich auf Bewegungen, die nicht durch Nutzerinnenverhalten wie Klicken oder Scrollen ausgelöst werden wie Bilder-Karussels oder selbststartende Videos oder Animationen. Wenn sie nicht innerhalb von fünf Sekunden von selbst stoppen sollen sie durch die Nutzerin angehalten, pausiert oder ausgeblendet werden können.

2.3.3 Animation from Interactions

2.3.3 ist eine AAA-Anforderung. Hier geht es um Bewegungen wie Parallax-Effekte. Parallax und ähnliche Effekte stehen im Verdacht, dass sie bei einigen Menschen Migräne- und andere Anfälle triggern können.
Hier geht es um Bewegung, die tatsächlich durch die Nutzerin ausgelöst, aber nicht intendiert ist. Wenn etwa bei Parallax sich der Hintergrund in einer anderen Geschwindigkeit bewegt als der gescrollte Content, ist das nicht erwartungskonform.

Mindest-Kontrast bei wechselnden Inhalten

Ein häufig zu findender Fehler sind auch wechselnde Hintergründe und der Mindest-Kontrast. Selten ist der Kontrast eines Textes so abgestimmt, dass er auch bei wechselnden Hintergründen die Anforderungen erfüllt.

Reduzierte Animationen durch Nutzer-Einstellungen

Meines Wissens unterstützen alle Mainstream-Betriebssysteme einen Modus, welcher Animationen und Bewegungen des Systems selbst reduziert. Dieser Modus kann von Apps, Webseiten oder Programmen unterstützt werden.
Die Anwendung fragt ab, ob diese Einstellung aktiviert ist und schaltet dann ggf. die Animationen ab. Bei Webseiten kann das mit dem CSS Media Query „prefer-reduced-motion “ abgefragt werden. Wenn dieses Query aktiviert ist, werden Animationen gestoppt, vorausgesetzt natürlich, die Webseite wurde entsprechend programmiert.
Alternativ kann man oben auf der Website einen Button anbieten, um auf der Seite verwendete Animationen zu stoppen.

Trigger-Warnungen

Trigger-Warnungen sind meines Wissens bisher nirgendwo vorgeschrieben, sind aber durchaus sinnvoll. Es gibt zwei Fälle, in denen Sie über eine Trigger-Warnung nachdenken sollten:

• Die Animation ist notwendig, etwa als Teil einer Verifikation oder Prüfungs-Aufgabe.
• Sie haben keine Möglichkeit, die Animation abzuschalten, zum Beispiel, weil sie über eine andere Anwendung reinkommt

Eine Trigger-Warnung muss, damit sie sinnvoll ist erscheinen, bevor die Animation startet. Die Nutzerin muss genügend Zeit haben, die Warnung wahrzunehmen. Das heißt, es sollten mindestens 5 Sekunden vergehen, bis die Animation erscheint oder die Person sollte sie selbst auslösen müssen.

Wer möchte Animationen und permanente Bewegungen?

Animationen und Bewegungen sind vor allem bei Designerinnen und Kunden beliebt. Sie unterstreichen die Fähigkeit der Entwicklerinnen und die Modernität des Kunden – auch wenn Trends schon total ausgelutscht sind. Erinnert sich noch jemand an den kleinen Hype um Parallax?
Dass diese Trends aber auch relativ schnell wieder abflauen zeigt auch, dass sie nicht nachhaltig bei der Konsumentin wirken. Probieren Sie mal aus, wie viele Besucherinnen die Effekte starten, wenn sie per Default abgeschaltet sind und aktiv ausgelöst werden müssen. Das dürfte relativ selten passieren: Ausnahme sind Multimedia-Inhalte, die der Kern der jeweiligen Unterseite sind.
Accessibility for Animations and Motion