Zu Beginn, ein bisschen Theorie über die WCAG! Darauf habt ihr doch nur gewartet, gell? Die WCAG hat gleich zwei Kriterien, die auf den Einsatz von Animationen zutreffen:
- Im Kriterium 2.2.2 schreibt die WCAG vor: wenn die Animation länger als 5 Sekunden dauert, muss es eine Möglichkeit geben, diese Animation zu stoppen oder abzuschalten.
- Im Kriterium 2.3.1 sagt sie, dass deine ganze Webseite keine Elemente beinhalten darf, die innerhalb einer Sekunde mehr als dreimal aufblitzen.
Das sind generelle Daumenregeln, an die du dich halten solltest. Wer die WCAG kennt, weiß, dass alles ein wenig komplexer ist. Ausnahme für das Kriterium 2.2.2 ist zum Beispiel, dass eine Animation länger als 5 Sekunden laufen kann, wenn sie „essenziell“ ist. Das bedeutet zum Beispiel, dass sich in einem Online-Test ein Balken, der die Zeit herunterzählt, dauerhaft bewegen darf.
Hier aber zu sehr ins Detail zu gehen, ist a) verwirrend und b) sprengt es den Rahmen. Wenn du Detailfragen zur WCAG hast, kannst du immer hier nachschauen: Zu den WCAG-Kriterien.
Damit du dir ein besseres Bild davon machen kannst, welche gängigen Animationen problematisch sind, habe ich dir hier ein paar Beispiele zusammengestellt.
Der Einsatz von Videos auf deiner Seite
Ja, ein Video zählt als eine Animation. Diese ganzen Hintergrundvideos, die du in Heros von Webseiten zu sehen bekommst, sind also ein großes Problem. Wenn diese Videos länger als 5 Sekunden sind, muss es irgendwo ein Knöpfchen geben, um diese Videos anzuhalten.
Auf der Seite „One percent for the Planet“ siehst du diese Stopp-Buttons ganz häufig. Zur Webseite von One percent for the Planet.
Das Problem der Barrierefreiheit von Slidern
Die 5-Sekunden-Regel gilt auch für Auto-Slider. Diese fallen unter „dauerhafte“ Animation. Es muss also einen Weg geben, sie zu stoppen. Eurowings hat auf ihrer Seite ein schönes Beispiel von einem Slider, den man anhalten kann. Hier der Link zur Seite von Eurowings.
Die schicken, laufenden Schriften
Du kennst bestimmt Schriften, die durchgehend durchs Bild laufen. Das ist eine Animation, die gestoppt werden können muss. Hier ist ein Beispiel von dem Balken: Link zur Seite von awwwards.com (englisch).
Workshop für Designer*innen
Du willst wissen, wie du als (UI / UX) Designer*in Webseiten und Apps barrierefrei gestaltest? In unserem Workshop zeigen wir dir alles, was du als Designer*in benötigst, um digitale Barrierefreiheit umzusetzen!
Überschriften, die Worte schreiben
Auch das kennst du bestimmt: Coole Überschriften, die sich Buchstabe für Buchstabe „selbst schreiben“ oder ganze Worte auswechseln.
Diese Dinger sind der maximale Horror für Screenreader-Nutzende. Das Wort wird manchmal gar nicht gelesen, es wird wiederholt, es wird mittendrin abgebrochen, es wird buchstabiert und so weiter. Die Probleme damit sind vielfältig.
GIFs: Auf Flackern bitte verzichten!
Flackern ist, wenn eine Blinkfrequenz von 3 und mehr Blitzen je Sekunde vorliegt. Dazu zählen auch GIFs in Präsentationen oder die halbe Webseite von der Agentur Kochstrasse. (Nichts gegen euch, Kochstraße, wir mögen euch!) Link zur Seite der Agentur Kochstrasse.
Der geliebte Parallax-Effekt
Effekte wie Parallax-Scrolling können cool aussehen, verursachen bei vielen Menschen aber leider Übelkeit. Objekte, die in unterschiedlicher Geschwindigkeit über den Bildschirm wandern, erzeugen ein Gefühl von Tiefe. Das wirkt sich auf die visuelle Wahrnehmung aus und erzeugt bei manchen Betrachtern Übelkeit. Davon betroffen sind vorwiegend Menschen mit Gleichgewichtsstörungen.
Wenn du in deinen Anwendungen nicht auf Parallax-Effekte verzichten kannst, solltest du sicherstellen, dass diese Bewegungen abgestellt werden können. Entwickler*innen deines Vertrauens können eine Media Query nutzen, um Elemente auf Webseiten unterschiedlich stark zu animieren oder die Animationen komplett zu stoppen.
Ein Live-Beispiel für den Parallax-Effekt kannst du auf der Seite von Weglot finden.
Fazit zum Einsatz von Animationen
Auch wenn es hier anders klingt, darfst du als Designer*in eigentlich recht viel, was Animationen angeht. Besonders die beliebten Mikro-Animationen für Interaktionen mit Elementen sind gar kein Problem.
Das Einzige, worauf du ein Auge haben musst, dass deine Animationen eben nicht länger als 5 Sekunden sind.
Beim Flackern gibt es noch die Sonderregel, dass es nur gilt, wenn der flackernde Bereich größer als 20 % oder 30 % des Bildschirms ist. Also in Theorie dürftest du ein kleines GIF haben, das flackert, allerdings nur, wenn es eben die zweite Regel einhält und trotz dessen nur unter 5 Sekunden ist. Bevor du dir da aber lange den Kopf zerbrichst, lass es lieber sein und erleichter dir dein Leben!
