Die Zeiten statischer Internetseiten mit Bildern, Tabellen und Texten sind längst vorbei. Animierte Elemente wie Slider, komplexe Bildergalerien oder Akkordeons sind längst Standard. Diese können, schlecht umgesetzt, zum Problem für Nutzer von Screenreadern werden. Doch barrierefreie Animationen können die Nutzbarkeit einer Website auch verbessern und Veränderungen klarer visualisieren. Wann Animationen barrierearm sind und wann sie selbst eine Barriere darstellen ist heute Thema im stolperfreien Blog.
Nützliche kleine barrierefreie Animationen – Microanimations
Als sogenannte Microanimations, also Mikroanimationen, werden kleine Animationen bezeichnet, die die Veränderung eines Status deutlich machen indem nicht nur die Ausgangssituation und der Endzustand, sondern auch der Übergang dazwischen deutlich wird. Beispiele gibt es viele:
- Ein Schieber als Checkbox-Ersatz in einem Formular, der von links nach rechts animiert und dabei vielleicht auch die Farbe ändert
- Markierung von Mouseover und Fokus-Effekten
- Bewegung eines symbolischen Produktes in den Warenkorb beim Klick auf den Button
- Ausklappen von Menüs und Popups
Die plötzliche Veränderung von Elementen oder das überraschende Erscheinen oder Verschwinden von Elementen können viele Nutzer verwirren. Dagegen gibt eine kleine Animation ein gutes Feedback für die Nutzerinteraktion und das Auge hat Zeit, diese Veränderung wahrzunehmen. Ein klarer Gewinn. Solche Microanimations unterstützen damit die Barrierefreiheit und machen es sehenden Nutzern einfacher, eine Website zu bedienen.
Wann Animationen nicht barrierefrei sind
Im Wesentlichen gibt es zwei Gründe, die gegen eine Animation sprechen können. Eine Animation ist immer dann nicht barrierefrei, wenn sie entweder nicht von jedem bedient werden kann oder selbst für eine bestimmte Gruppe von Menschen zum medizinischen Risiko oder zumindest unangenehm wird.
Nebenwirkungen falsch eingesetzter Animationen
Falsch oder übertrieben eingesetzte Animationen unterstützen die Nutzbarkeit nicht, sondern lösen beim Betrachter unangenehme oder sogar gefährliche Nebenwirkungen aus.
Epilepsie
Flackernde Elemente, also Elemente die mehr als 3 Mal pro Sekunde ihre Farbe oder Helligkeit ändern, können bei Betroffenen einen epileptischen Anfall auslösen. Der Prüfschritt 2.3.1 der WCAG2.2 schließt die meisten solcher Animationen klar aus.
ADS, ADHS und andere Gründe, mehr Konzentration zu brauchen als andere
Bestimmte Animationen können es Menschen mit ADS und ADHS erschweren, sich auf Ihre Website zu konzentrieren. Das sind vor allem Bewegungen, die außerhalb des aktuellen Fokusbereichs passieren und so den Blick immer wieder ablenken. Nutzen Sie Animationen deshalb idealerweise nur als Reaktion auf eine Nutzerinteraktion.
Schwindel
Besonders beliebt bei Grafikern scheint derzeit der sogenannte Parallaxen-Effekt. Dabei wird simuliert, dass sich Elemente in unterschiedlicher Entfernung zum Nutzer befinden. Scrollt man dann den Inhalt, bewegen diese sich unterschiedlich schnell. Dieser Effekt ist der realen Welt entnommen und kann doch bei einigen Menschen zu Schwindel bis hin zu Übelkeit führen. Das gilt insbesondere dann, wenn verschiedene Wahrnehmungen nicht zusammenpassen, beispielsweise die wahrgenommene Reihenfolge der Ebenen und die dazu umgesetzte Bewegungsgeschwindigkeit. Barrierefreie Animationen mit Paralax-Effekten sind schwer umzusetzen und benötigen viel Feingefühl. Im Idealfall verzichten Sie ganz darauf.
Barrierefreie Animationen in Slidern, Akkordeons und Co.
Das zweite Hindernis bei der Verwendung von animierten Inhaltselementen ist die Bedienung. Auch komplexe interaktive Elemente wie Slider oder Akkordons müssen vollständig über die Tastatur bedienbar sein und sauber von Screenreadern vorgelesen werden können. Dabei sollten folgende Regeln beachtet werden:
- Automatisch laufende Animationen sollten spätestens nach 5 Sekunden anhalten oder vom Nutzer gestoppt werden können.
- Bei MouseOver sollten Slider immer anhalten.
- Der aktuelle Zustand des Elementes sollte von Screenreadern ausgelesen werden können.
- Die Tastaturbedienbarkeit muss sich an Standards halten. Diese werden von den ARIA-Rollen der entsprechenden Elemente definiert. Mehr zu ARIA erfahrt ihr im Blog-Beitrag über ARIA-Rollen und Attribute. Eine Bibliothek von vielen Inhaltslementen und deren Interaktionsmöglichkeiten bietet das W3C auf seiner Website an.
Barrierefreie Animationen – Fazit
Microanimations zur Verbesserung der Nutzererfahrung und Visualisierung von Veränderungen sind großartig. Übertreiben Sie es mit den Spielereien aber nicht. Animationen müssen sich für den Nutzer natürlich anfühlen, nur dann sind sie auch eine Hilfe.
Animierte Inhaltselemente wie Slider sind schwierig barrierefrei umzusetzen. Der Aufwand und damit die Kosten eines solchen Elementes sind hoch, der Nutzen oft fraglich. Insbesondere Textinhalte sollten nur dann in Slidern verarbeitet werden, wenn diese keine große Priorität haben. Denn gehen Sie davon aus, dass sie von sehenden und nicht sehenden Nutzern nicht entdeckt werden, wenn sie erst auf Seite 15 eines Sliders erscheinen. Versuchen Sie dann andere Lösungen zu finden.