Eine animierte Webseite wirkt lebendig und modern. Sanft eingeblendete Abschnitte, ein sich drehendes Logo, ein Bild, das beim Scrollen langsam mitwandert: solche Effekte machen Spaß und ziehen Blicke an.
Für einen Teil Deiner Besucher kippt dieser Reiz aber ins Unangenehme. Bewegung kann Schwindel und Übelkeit auslösen, von der Aufgabe ablenken oder im Extremfall einen Anfall provozieren. Animation barrierefrei zu gestalten heißt deshalb, Effekte maßvoll einzusetzen und abschaltbar zu halten.
Wenn Bewegung zur Barriere wird
Manche Menschen reagieren empfindlich auf Bewegung am Bildschirm. Wer unter Gleichgewichtsstörungen leidet, bekommt von wandernden Hintergründen ein Gefühl wie von Seekrankheit. Schwindel, Übelkeit und Kopfschmerzen sind die typische Folge, oft noch Minuten nach dem Schließen der Seite.
Besonders heikel sind Effekte, bei denen sich Vorder- und Hintergrund beim Scrollen unterschiedlich schnell bewegen. Das Auge sucht vergeblich nach einem festen Bezugspunkt. Ein Hero-Bereich, der sich beim Runterscrollen aufzoomt, oder Elemente, die quer ins Bild fliegen, erzeugen denselben Sog.
Andere kämpfen mit ihrer Aufmerksamkeit. Ein blinkendes Banner oder ein endlos rotierendes Karussell zieht den Blick immer wieder weg vom Text. Für Menschen mit ADHS oder kognitiven Einschränkungen wird das Lesen zur Tortur, weil das Auge keine Ruhe findet. Schon ein zappelndes Werbe-Bildchen am Seitenrand reicht, um den Faden jedes Mal zu zerreißen.
Am ernstesten ist Flackern. Schnell blitzende Inhalte können bei fotosensibler Epilepsie einen echten Anfall auslösen. Die anerkannte Faustregel: nichts darf häufiger als dreimal pro Sekunde aufblitzen. Das ist eine harte Sicherheitsgrenze, kein bloßer Geschmacks-Rat.
Die Systemeinstellung „Bewegung reduzieren"
Hier kommt eine angenehme Nachricht. Moderne Geräte bieten längst eine Einstellung mit dem Namen „Bewegung reduzieren". Wer sie aktiviert, sagt damit jeder Webseite klar: bitte weniger Animation. Eine gut gebaute Seite hört auf diesen Wunsch automatisch, ohne dass der Besucher bei Dir noch irgendetwas anklicken muss.
Den Schalter findest Du auf dem Mac und auf dem iPhone unter den Bedienungshilfen, unter Windows in den Anzeige-Einstellungen, auf Android ebenfalls unter den Bedienungshilfen. Wer ihn einmal setzt, profitiert davon auf jeder Seite, die ihn respektiert.
Für Dich als Betreiber ist das ein bequemer Hebel. Du musst niemanden raten lassen und keinen extra Knopf auf Deiner Seite einbauen. Eine sauber umgesetzte Webseite erkennt die Vorliebe Deines Besuchers von selbst und fährt die Effekte herunter. Aktive Animationen laufen dann sofort durch oder bleiben ganz aus, und sanftes Scrollen springt auf den direkten Weg zurück.
Du kannst das sogar leicht selbst testen. Stell die Einstellung auf Deinem eigenen Gerät auf „Bewegung reduzieren" und ruf Deine Seite neu auf. Beruhigt sie sich spürbar, ist die Technik im Haus. Tanzt sie munter weiter, weißt Du, dass an dieser Stelle noch Arbeit wartet.
Autoplay, Karussells und blinkende Inhalte
Drei Bewegungsmuster machen in der Praxis die meisten Probleme. Sie sehen auf den ersten Blick harmlos aus, kosten aber genau die Kontrolle, die Barrierefreiheit dem Besucher geben soll.
- Autoplay-Videos: Video oder Animation, die ohne Klick loslaufen, überrumpeln. Lass den Besucher selbst starten oder zeig sofort eine deutlich sichtbare Pause-Taste.
- Karussells: Slider, die von allein weiterspringen, nehmen das Lesetempo aus der Hand. Wenn Du eines einsetzt, gehört eine Stopp-Taste dazu, und es muss sich auch per Tastatur bedienen lassen.
- Blinkende Elemente: Schnell flackernde Banner oder Werbe-Animationen sind das größte Risiko. Bleib deutlich unter drei Blitzen pro Sekunde oder verzichte ganz darauf.
Das selbst weiterspringende Karussell auf der Startseite ist dabei der häufigste Stolperstein. Es wechselt nach wenigen Sekunden das Bild, oft genau dann, wenn jemand den Text noch liest oder gerade einen Link anvisiert hat. Wer langsamer liest oder eine Sehbehinderung hat, kommt mit dem Tempo der Maschine nicht mit. Wie Du solche Karussells gezielt pausierbar und bedienbar machst, zeige ich Dir Schritt für Schritt im eigenen Beitrag.
Daran erkennst Du heikle Effekte auf Deiner eigenen Seite: Wandert etwas, ohne dass Du es angestoßen hast, ist es ein Kandidat zum Prüfen. Stell Dir bei jedem solchen Element die Frage, ob es sich anhalten lässt. Lautet die Antwort nein, gehört eine Pause-Möglichkeit dazu oder der Effekt fliegt raus.
Sichere Animation — kurz, dezent, abschaltbar
Animation muss nicht weg. Sie muss nur dienen statt dominieren. Drei einfache Leitplanken halten Deine Effekte auf der sicheren Seite, ohne dass die Seite langweilig wirkt.
Kurz: Ein Übergang, der nur einen kurzen Augenblick dauert, reicht, um eine Veränderung sichtbar zu machen. Alles, was länger schleicht, hält den Besucher auf und reizt das Auge unnötig.
Dezent: Ein sanftes Einblenden oder eine leichte Verschiebung lenkt freundlich. Große Sprünge quer über den Bildschirm, wildes Zoomen oder Rotieren ziehen dagegen Aufmerksamkeit ab, die dem Inhalt gehört.
Abschaltbar: Achte darauf, dass eine Animation nie die einzige Botschaft trägt. Hebt sich ein Element beim Überfahren leicht an, sollte zusätzlich ein deutlicher Rahmen oder eine Farbänderung mitkommen. Hier helfen gute Farbkontraste mehr als jeder Bewegungs-Reiz.
Ein typischer Hover-Effekt zeigt das gut. Eine Karte, die sich beim Überfahren anhebt, ist freundlich, solange auch ein sichtbarer Rand oder ein Farbwechsel mitkommt. Bleibt nur die Bewegung übrig, geht der Hinweis bei reduzierter Animation verloren. Plane den ruhenden Zustand deshalb immer so, dass er auch für sich allein verständlich bleibt. Wenn Du diese drei Leitplanken einhältst, fällt der barrierefreie Weg meist mit dem geschmackvollen zusammen.
Sprich Ruhe und Abschaltbarkeit klar an
Du musst nichts davon selbst bauen. Du musst nur wissen, was Du bestellst. Mit den richtigen Stichworten lenkst Du das Ergebnis, ohne je in den Maschinenraum zu steigen.
Bitte darum, dass die Seite die Systemeinstellung „Bewegung reduzieren" respektiert. Verlange für jeden Slider und jedes Auto-Video eine sichtbare Pause- oder Stopp-Taste. Und lass Dir zusagen, dass nichts schneller als dreimal pro Sekunde blinkt.
Diese drei Sätze decken den größten Teil ab. Sie sind konkret genug, dass Deine Agentur sofort weiß, was gemeint ist, und so formuliert, dass Du das Ergebnis später selbst nachprüfen kannst. Mehr Fachwissen brauchst Du an dieser Stelle nicht.
Fazit
Bewegung ist ein Werkzeug, kein Selbstzweck. Sie hilft, wenn sie eine Veränderung erklärt, und sie stört, wenn sie nur Eindruck schinden will. Die empfindlichen unter Deinen Besuchern danken es Dir, wenn Du im Zweifel den ruhigeren Weg wählst.
Lass die Seite auf die Systemeinstellung hören, stoppe Autoplay und Karussells und halte Effekte kurz und dezent. Damit ist der größte Teil geschafft, und Deine Webseite wirkt nebenbei aufgeräumter für alle.