Interaktion und Animation – aber barrierefrei

Mit neuen Webtechnologien wurden die Webseiten vor allem eins: interaktiver, animierter, lebendiger. Animationen können die Aufmerksamkeit gezielt erregen oder sogar lenken, sie sorgen für eine tiefgehendere »User Experience«. Dennoch sollten sie mit Bedacht eingesetzt werden, weil sie gesundheitliche Folgen haben können.

Apple hat im Jahr 2013 die Bedienoberfläche seines mobilen Betriebssystems iOS mit der Version 7 radikal überarbeitet. Neu waren unter anderem transluzente Oberflächen, weichgezeichnete Bereiche und augenfällige Animationen wie Fullscreen-Zoom. Weitestgehend wurden diese neuen Effekte akzeptiert bis sogar mit Begeisterung angenommen, sodass Apple mit diesem Look auch neue Standards setzte. Manche Trends hielten in vielerlei Software Einzug. Selbst auf sonst sehr schlichten Webseiten werden Bilder mit Bewegungseffekten in Slideshows präsentiert oder halbtransparente, weichgezeichnete Bereiche als Gestaltungsmittel angewandt. Mit höherer Rechenkapazität und auch softwareseitig immer geringer werdenden technischer Hürden nahmen und nehmen diese Animationen zu.

Allerdings kamen bereits zu Beginn dieser Effekte auch Beschwerden über Kopfschmerzen, Unwohlsein und Schwindel. Ein Hauptkritikpunkt war, dass die Effekte nicht dem natürlichen Bewegungsgefühl der Nutzer*innen entsprachen. Das Gleichgewichtsorgan sorgt normalerweise dafür, dass wir unsere Balance und Augenbewegungen kontrollieren können. Auch gesunde Menschen geraten bekanntlich an ihre Grenzen, wenn sie sich beispielsweise zu lange zu schnell drehen. Bei verschiedenen Krankheiten reagiert das Gleichgewichtsorgan aber deutlich empfindlicher. Erscheinungen wie Schwindel oder Kopfschmerzen können umso schneller auftreten – und mitunter reichen eben Bewegungsanimationen auf dem Bildschirm, in den man gerade blickt.

Diese vestibulären Störungen können genetisch bedingt sein oder durch Umweltfaktoren begünstigt werden. Es gibt nur grobe Schätzungen, wie viele Menschen es letztlich betrifft. Sicher annehmen kann man aber, dass weite Teile der Bevölkerung an Gleichgewichtsstörungen leiden.

Problematisch sind immer auch Bewegungen, die nicht vorhersehbar sind. Beispiele dafür sind das »Scrolljacking« oder das »Parallax Scrolling«, also Arten des Scrollens, bei denen die Webseite nicht erwartungsgemäß nur nach unten scrollt, sondern sich währenddessen Bewegungen von verschiedenen Seiten auftun.

Leider lässt sich der Bogen aber noch viel weiter spannen. Über die Bewegungseffekte und dem beschriebenen Konflikt mit dem Gleichgewichtsorgan hinaus können visuelle Animationen auch Menschen mit Epilepsie triggern. Gerade großflächige Animationen, kontraststarke Muster, heftige Bildwechsel und aufblitzender, flackernde Lichter sind gefährlich. Forscher*innen zufolge können auch statische Gittermuster Krampfanfälle auslösen.

Aber zurück ins Jahr 2013: Interessanterweise dauerte es nicht lange, bis Apple auf die Beschwerden reagierte. In den Einstellungen des Betriebssystems wurde unter den Bedienungshilfen die Option ergänzt, Bewegungen zu reduzieren. Mit dieser Einstellung wurden Effekte in der Oberfläche des Betriebssystems auf ein Minimum reduziert. Den Weg ins Webdesign fand diese Einstellung mit Apples Browser Safari in der Version 10.1, die das Media-Query prefers-reduced-motion eingeführt hat. Die Funktionsweise ist sehr vergleichbar mit dem Dark mode: Der Browser unterstützt die Systemeinstellung als Weichenstellung im Stylesheet der Webseite. Ein schlichtes Beispiel wäre dieses:

@media screen and (prefers-reduced-motion: reduce) {
#animation {
display: none;
}
}

Wenn die Einstellung »prefers-reduced-motion« aktiv wäre, würde das Element mit der ID »animation« gar nicht angezeigt werden. Stylesheets sind in der Praxis deutlich komplexer, aber worum es im Kern geht, ist, dass barrierefreies Webdesign nicht zwangsläufig ohne Animationen daherkommen muss. Viele Webseitenbetreiber*innen wollen schließlich wegen des Look and Feel nicht darauf verzichten, aber sie können betroffenen Nutzer*innen damit eine animationsfreie, angenehme Alternative bieten. Das CSS-Feature gilt als zukunftssicher und wird bereits von allen relevanten Browsern unterstützt.

Darüber hinaus gibt es weitere goldene Regeln für die Animationen auf barrierefreien Webseiten. Die Animationen sollten immer durch die Nutzer*innen gesteuert werden oder nur von sehr kurzer Dauer sein. Ferner ist im »Success Criterion 2.2.2 Pause, Stop, Hide« der Richtlinien für barrierefreie Webinhalte (WCAG) 2.0 explizit vorgesehen, dass sich automatisch bewegender, blinkender oder scrollender Inhalt, der länger als 5 Sekunden anhält, gestoppt oder oder verborgen werden kann.

Es gibt nicht nur menschliche Barrieren. Animationen oder eingebettete Videos sind nicht selten auch datenintensiv, weshalb sie über den Mobilfunk mancherorts kaum laden oder das Datenvolumen empfindlich beanspruchen. Die Absprungrate dieser Webseiten ist folglich besonders hoch. Deshalb sollte man nach Möglichkeit auch diesen Nutzer*innen mit dem Media-Query »prefers-reduced-data« eine Alternative bieten. Sobald die Einstellung aktiv ist, reduzierte Daten zu bevorzugen, lässt sich über die eigene Webseite gezielt für diesen Fall der Inhalt weniger datenintensiv ausliefern.

Es wäre fatal, gesundheitliche Folgen wie Schwindel, Kopfschmerzen oder Krampfanfällen in der Gestaltung der Webseite zu vernachlässigen. Zum einen ist es so gefährlich wie vermeidbar, zum anderen betrifft es potenziell jeden Menschen. Manch ein Mensch wird mit einer Beeinträchtigung geboren, andere erkranken im Laufe ihres Lebens und vor allem werden wir alle schlichtweg auch älter. Neue CSS-Features ermöglichen es, betroffenen Nutzer*innen gezielt angepasste Inhalte auszuliefern, die Inhalte zugänglicher zu machen, die Reichweite zu erhöhen und die Absprungraten nachhaltig zu senken.