Animationen barrierefrei: Bewegung, die man anhalten kann

Bewegung macht eine Seite lebendig, kann aber Schwindel auslösen und vom Lesen ablenken. Diese Website ist voller Animationen und trotzdem barrierefrei. So geht das.

Zum Vergleich Prüfung für deine Website

Selbst vergleichen

Animationen und Bewegung: vorher und nachher

Vorher: Laufband, Karussell und pulsierendes Banner ohne Halt Nachher: Ruhige Fassung mit Schalter zum Anhalten

Links läuft alles ohne Pause. Rechts hat jemand auf „Bewegung anhalten“ gedrückt. Den Regler bedienst du mit der Maus, mit dem Finger oder mit den Pfeiltasten.

Warum es zählt

Warum Animationen barrierefrei gestaltet werden müssen

Für viele Menschen ist Bewegung auf Websites mehr als eine Ablenkung. Wer an einer Störung des Gleichgewichtsorgans leidet, bekommt von großen Parallaxeffekten oder heranzoomenden Bildern Schwindel und Übelkeit. Menschen mit Aufmerksamkeitsstörungen oder Lernschwierigkeiten können sich neben einem laufenden Karussell kaum auf den Text konzentrieren.

Am gefährlichsten ist Blinken. Inhalte, die mehr als dreimal pro Sekunde aufleuchten, können bei Menschen mit fotosensitiver Epilepsie Anfälle auslösen. Deshalb gehört schnelles Flackern auf keine Website, auch nicht in Werbebanner oder eingebettete Videos. Hier gibt es keinen Spielraum, die Regel gilt schon in der niedrigsten Stufe.

Das heißt nicht, dass eine barrierefreie Website still sein muss. Diese Seite zeigt, wie es geht. Alle Animationen folgen dem Scrollen, nichts blinkt, und oben rechts hält ein Schalter jede Bewegung sofort an. Wer in seinem Betriebssystem reduzierte Bewegung eingestellt hat, sieht die Szenen von Anfang an in ihrem ruhigen Endzustand.

WCAG 2.2

Was die WCAG hier verlangen

2.2.2 Stufe A

Pausieren, Stoppen, Ausblenden

Bewegung, die von selbst startet und länger als fünf Sekunden läuft, lässt sich anhalten, stoppen oder ausblenden.
2.3.1 Stufe A

Grenzwert von dreimaligem Blitzen

Nichts blinkt öfter als dreimal pro Sekunde, es sei denn, es liegt unter den Grenzwerten.
2.3.3 Stufe AAA

Animation aus Interaktionen

Bewegung, die durch Scrollen oder Klicken entsteht, lässt sich abschalten, sofern sie nicht wesentlich ist.
2.2.1 Stufe A

Zeitlimits anpassbar

Inhalte, die von selbst weiterspringen, geben genug Zeit oder lassen sich anhalten.

Lösung

So bleiben Animationen barrierefrei und trotzdem lebendig

Reduzierte Bewegung achten

Die Einstellung prefers-reduced-motion im Betriebssystem ist ein klares Signal. Zeige diesen Besuchern ruhige Übergänge oder den Endzustand ohne Bewegung.
Einen Schalter anbieten

Ein gut sichtbarer Schalter „Bewegung“ in der Kopfzeile hält alle Animationen an, auch für Menschen, die die Systemeinstellung nicht kennen.
Karussells mit Halt

Laufende Karussells brauchen einen Pause-Knopf, sollten beim Hover und Fokus anhalten und lassen sich besser ganz durch eine ruhige Liste ersetzen.
Bewegung mit Bedeutung

Jede Animation sollte etwas erklären. Was nur dekoriert, darf leise sein, kurz bleiben und muss nie in Schleife laufen.

Vorher

.banner {
  animation: blinken 0.2s infinite;
}

Nachher

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

Fünf Blitze pro Sekunde überschreiten den Grenzwert. Die Medienabfrage für reduzierte Bewegung schaltet Animationen für alle ab, die das wünschen.

Fragen

Fragen zu Animationen und Bewegung

Sind Animationen auf barrierefreien Websites verboten?

Nein. Bewegung ist erlaubt, wenn sie nicht blinkt, sich anhalten lässt und die Einstellung für reduzierte Bewegung respektiert. Diese Website ist das Beispiel dafür.

Was bedeutet prefers-reduced-motion?

Das ist eine Einstellung in Windows, macOS, iOS und Android, mit der Menschen weniger Bewegung anfordern. Websites können sie per CSS oder JavaScript abfragen und Animationen reduzieren.

Sind Autoplay-Videos erlaubt?

Nur ohne Ton oder mit einer leicht erreichbaren Möglichkeit, den Ton und die Wiedergabe zu stoppen. Laufen sie länger als fünf Sekunden, brauchen sie eine Pause.

Weitere Ratgeber zur Barrierefreiheit

Wie steht deine Website da?

Wir prüfen deine Seite auf diese und alle anderen Barrieren und schicken dir einen Bericht, der sagt, was zuerst dran ist.

Anfrage für eine Prüfung senden Zum Schnelltest

Animationen barriere­frei: Bewegung, die man anhalten kann