Animationen und Bewegungen barrierefrei gestalten


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 Bewegungen.
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 Anfalls-Erkrankungen

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.
Die dritte Gruppe wird seltener genannt: Effekte wie Parallax können bei einigen Personen Migräne 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 für ADHS 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 nicht-intendierte Bewegungen wie Bilder-Karussels oder selbststartende Videos oder Animationen. Wenn sie nicht innerhalb kurzer Zeit 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.

Wenn Du es nicht machst, macht es keiner