Es stimmt, Webanimationen können barrierefrei sein! Manchmal erfordert es nur ein wenig mehr Aufwand, um sicherzustellen, dass dies der Fall ist. Es gibt strategische Dinge, die wir tun können, um sicherzustellen, dass unsere Animationen einen positiven Einfluss auf die Barrierefreiheit haben, wie zum Beispiel die Planung, wie sie zur Gesamt-UX und zur Benutzerfreundlichkeit unserer Website beitragen. Es gibt auch taktischere Überlegungen, um sicherzustellen, dass die Animationen auf unserer Website barrierefrei sind, und hier kommen die Web Content Accessibility Guidelines (WCAG) ins Spiel.
Während unterschiedliche Kontexte die Details dessen, was Sie tun müssen, beeinflussen können, bietet die WCAG eine Reihe von Empfehlungen für animierte Inhalte und Interaktionen. Dazu gehören Richtlinien für die Bereitstellung von Pausen- und Wiedergabesteuerungen, Grenzwerte für das Blinken oder Flackern des Bildschirms und Ratschläge, wann Optionen für reduzierte Bewegungen für Benutzer mit Bewegungsempfindlichkeiten bereitgestellt werden sollten. Wenn Sie sie sich eine Weile nicht angesehen haben, wurde die Spezifikation auf Version 2.1 aktualisiert und bietet nun noch mehr nützliche Anleitungen, wie wir Webanimationen gestalten können, die barrierefrei sind.
Lassen Sie uns jede dieser Empfehlungen im Detail untersuchen, um zu sehen, wie wir sie auf unsere Arbeit im Web anwenden können.
Anhalten, Stoppen, Ausblenden
Die erste der WCAG-Empfehlungen, die sich speziell auf Animationen bezieht, ist Anhalten, Stoppen, Ausblenden. Hier gibt der Titel bereits einen ziemlich großen Hinweis darauf, worum es bei der Empfehlung geht. Sie besagt:
Für alle sich bewegenden, blinkenden oder scrollenden Informationen, die (1) automatisch beginnen, (2) länger als fünf Sekunden dauern und (3) parallel zu anderen Inhalten angezeigt werden, muss ein Mechanismus vorhanden sein, mit dem der Benutzer sie anhalten, stoppen oder ausblenden kann, es sei denn, die Bewegung, das Blinken oder das Scrollen ist Teil einer Aktivität, bei der es unerlässlich ist; […]
Die Empfehlung bezieht sich speziell auf Bewegungen, die von der Webseite ohne Benutzerinteraktion initiiert werden, und klingt zunächst vielleicht nicht nach etwas, das für UI-Animationsarbeiten relevant ist. Die meisten der von uns in der UI-Animationsarbeit verwendeten Dauern liegen individuell weit unter dieser Schwelle von fünf Sekunden. Es gibt jedoch einige gängige Muster, bei denen dies zutrifft. Zum Beispiel: sich automatisch vorwärts bewegende Karussells oder Diashows, animierte Hintergründe oder animierte Illustrationen. Während jede einzelne Animation innerhalb dieser Muster immer noch sehr kurz sein mag, spielt die daraus resultierende Gesamtbewegung oft über fünf Sekunden hinaus. Dies gilt insbesondere, wenn diese so gestaltet sind, dass sie in einer Endlosschleife abgespielt werden, was definitiv länger als fünf Sekunden ist.
So erfüllen Sie die Kriterien für Anhalten, Stoppen, Ausblenden
Wenn Sie einige dieser länger laufenden Animationen haben, müssen Sie eine Art von Pausen- und Wiedergabesteuerung hinzufügen, die es den Benutzern ermöglicht, die Bewegung und/oder das automatische Abspielen zu steuern. Die WCAG-Spezifikation schreibt jedoch nicht vor, wie diese Steuerelemente aussehen müssen. Sie haben die volle Gestaltungsfreiheit.
Ein gutes Beispiel hierfür ist, wie die Artikelserie „Dark Side Of The Grid“ die Beispielanimationen handhabt. Jede animierte Figur läuft unendlich, sobald sie startet. Daher bietet sie einen Wiedergabe-/Stopp-Button, damit die Leser die Animation abspielen können, wenn sie sie sehen möchten, und sie stoppen, wenn sie fertig sind. Andere, dekorativere oder illustrative Animationen im Artikel spielen einmal ab und präsentieren dann einen Button zum erneuten Abspielen, falls die Benutzer dies wünschen. Die Platzierung und das Design der Buttons passen auch zur Ästhetik des Gesamtdesigns des Artikels, was sie sowohl funktional als auch ästhetisch ansprechend macht.
Animierte GIFs sind ebenfalls etwas, auf das man achten sollte. Wenn Sie ein animiertes GIF haben, das in einer Schleife läuft, benötigen Sie eine Art von Pausen-/Wiedergabesteuerung, um dieses Kriterium erfolgreich zu erfüllen. Beide in diesem Beitrag genannten Techniken sind hilfreich, um dies zu bewerkstelligen.
Es gibt einige Ausnahmen für diese Empfehlung, wie von der WCAG vermerkt. Eine besonders erwähnenswerte Ausnahme sind Ladeanzeigen und Preloader.
Drei Blitze oder unterhalb des Schwellenwerts
Diese Empfehlung ist eine, für die es wahrscheinlich die meiste Forschung gibt, da sie aus der Zeit des Broadcast-Fernsehens stammt. Der Hauptgrund für diese Empfehlung ist, dass signifikantes Flackern auf dem Bildschirm Anfälle auslösen kann.
Kurz gesagt, drei Blitze oder unterhalb des Schwellenwerts besagt:
Webseiten enthalten nichts, das mehr als dreimal pro Sekunde aufblitzt oder das Aufblitzen unterhalb der allgemeinen Blitz- und roten Blitzschwellenwerte liegt.
So erfüllen Sie die Kriterien für drei Blitze oder unterhalb des Schwellenwerts
Die WCAG liefert Details zu den Größen-, Verhältnis- und Blickwinkel-Schwellenwerten, unter denen das Flackern des Bildschirms als sicher gelten könnte. Aber für die meisten von uns ist es wahrscheinlich am einfachsten, alles zu vermeiden, was mehr als dreimal pro Sekunde aufblitzt. Ich glaube nicht, dass viele UX-Designer absichtlich übermäßiges Flackern einsetzen, aber es kann passieren. Zum Beispiel kann ein Design, das einen Videospiel-artigen oder glitchigen Vibe anstrebt, ein gewisses Bildschirmflackern beinhalten, das häufiger als dreimal pro Sekunde auftritt.
Ein spezifisches Beispiel für ein Design mit erheblichem Flackern ist dieser Artikel der Huffington Post, der unten abgebildet ist. Es ist ein stark stilisierter Beitrag darüber, wie Millennials im Vergleich zu früheren Generationen bei Jobs und Altersvorsorge härtere Zeiten durchmachen. Sein glitchiges 8-Bit-Videospiel-Design passt sehr gut zum Thema des Artikels. Designtechnisch ist es eine großartige Wahl für das Thema und gut umgesetzt. Aber es gibt Zeiten, wie man in den Frame-by-Frame-Aufnahmen unten sehen kann, in denen die Textfarbe mehr als dreimal pro Sekunde flackert.
Diese Menge an Flackern könnte problematisch für Menschen mit Epilepsie oder anderen körperlichen Reaktionen sein, die durch Flackern ausgelöst werden. Zu ihrer Ehre stellte die Huffington Post auch eine textbasierte Version des Artikels für Personen zur Verfügung, die empfindlich auf Flackern reagieren, wie Eileen in diesem Beitrag erwähnt, sowie eine Vorabwarnung vor der potenziellen Flackergefahr.
Im Allgemeinen ist es der sicherste Weg, um dieses Kriterium zu erfüllen, Effekte zu vermeiden, die häufiges Flackern erfordern. Wenn Sie jedoch keine flackernden Animationen in Ihrem Projekt vermeiden können, bietet die WCAG detaillierte Anweisungen zu den sicheren Schwellenwerten für das Flackern des Bildschirms. Außerdem ist es eine gute Sache, eine Vorabwarnung für flackernde Inhalte und eine alternative Version der Inhalte ohne den Flackereffekt (wie im obigen Beispiel) bereitzustellen.
Die A-, AA- und AAA-Stufen der WCAG
Die WCAG hat mehrere Stufen von Kriterien und Konformität, weshalb jede Empfehlung eine Kennzeichnung hat, unter welcher Stufe sie fällt. Stufe A-Konformität ist die Mindeststufe der Konformität. Stufe AA ist die mittlere Stufe der Konformität und zeigt an, dass die Kriterien für Stufe A und AA erfüllt wurden. Stufe AAA ist die höchste Stufe der Konformität und erfordert die Erfüllung der Kriterien aus den Stufen A, AA und AAA. Typischerweise erfordern die Richtlinien der Stufe AAA zusätzlichen Aufwand zur Erfüllung. (Wenn Sie mehr über diese Stufen und ihre Inhalte erfahren möchten, die über die hier behandelten animationsbezogenen Empfehlungen hinausgehen, habe ich am Ende dieses Artikels eine Liste mit hilfreichen Ressourcen zusammengestellt.)
Im Allgemeinen streben die meisten Leute die Konformität auf Stufe AA an, wenn sie sagen, dass sie eine barrierefreie Website erstellen. Dies ist auch die Stufe, die Sie möglicherweise in einer Ausschreibung oder einem Projektbrief sehen. Die letzten beiden besprochenen Richtlinien fallen unter die Kriterien der Stufe AA und müssen daher erfüllt werden, um die Konformität auf Stufe AA beanspruchen zu können. Die nächste Richtlinie ist jedoch Teil der Kriterien der Stufe AAA. Auch wenn sie außerhalb der üblichen Konformitätsstufe liegt, ist sie eine sehr nützliche Empfehlung, die berücksichtigt werden sollte, wenn Ihr Projekt stark auf Animation setzt. Ich empfehle dringend, sie in Ihre Arbeit zu implementieren.
Animation durch Interaktionen
Diese Richtlinie behandelt eine andere Art von Animation als die beiden vorherigen. Während die ersten beiden im Allgemeinen auf Animationen angewendet werden, die von der Webseite selbst initiiert werden, bezieht sich diese auf Animationen, die durch Benutzerinteraktionen initiiert werden. Genauer gesagt besagt sie:
Durch Interaktion ausgelöste Bewegungsanimationen können deaktiviert werden, es sei denn, die Animation ist für die Funktionalität oder die vermittelten Informationen unerlässlich.
Beim ersten Lesen kann der Begriff „Bewegungsanimation“ verwirrend sein, da wir die Begriffe „Bewegung“ und „Animation“ normalerweise synonym verwenden. Es mag anfangs übermäßig spezifisch erscheinen, aber es ist sinnvoll, in diesem Fall so spezifisch zu sein. Die WCAG definiert Bewegungsanimation als Animationen, die verwendet werden, um „die Illusion von Bewegung zu erzeugen“, und spezifiziert, dass „Bewegungsanimationen keine Farb-, Unschärfe- oder Opazitätsänderungen beinhalten“.
Im Wesentlichen wird der Begriff Bewegungsanimation verwendet, um anzugeben, dass bestimmte Arten von Animationen das Gefühl von Bewegung erzeugen, während andere dies nicht tun. Es sind diese Animationen, die ein Gefühl der Bewegung erzeugen, die für diese Richtlinie relevant sind. Es ist wichtig, diesen Unterschied bei der Diskussion von Animation und Barrierefreiheit zu beachten, um sicherzustellen, dass Sie Ihre Bemühungen effizient konzentrieren. Wenn wir diesen Unterschied in einem sehr augenähnlichen Venn-Diagramm ausdrücken würden, sähe er so aus.
In den letzten Jahren haben wir erkannt, dass einige Arten von Bewegungen auf dem Bildschirm, auch als Teil einer Benutzeroberfläche, Menschen mit Bewegungsempfindlichkeiten körperlich krank machen können. Deshalb sollten wir in Erwägung ziehen, in unserer Arbeit einen Modus für reduzierte Bewegungen zu schaffen. Ich habe in diesem Artikel mehr über die Arten von Bewegungseffekten geschrieben, die am wahrscheinlichsten auslösend sind, und dieser Beitrag vom WebKit-Blog behandelt einige Beispiele im Detail.
So erfüllen Sie die Kriterien für Animationen durch Interaktionen
Die WCAG schlägt vor, unnötige Animationen zu vermeiden, eine Steuerung für Benutzer bereitzustellen, um potenziell problematische Bewegungsanimationen auszuschalten, oder die Funktion für reduzierte Bewegungen in Betriebssystemen und User Agents zu nutzen. Betrachten wir jeden dieser Punkte etwas genauer. Es gibt verschiedene Dinge, die wir tun können, um zu vermeiden, dass Menschen Animationen ausgesetzt werden, die sie schwindelig, übel oder schlimmer machen könnten.
Unnötige Animationen vermeiden
Kontext und Erwartungen spielen hier ebenfalls eine Rolle. Die Menge an Bewegung, die Sie auf einer Website für einen Film oder ein Videospiel vernünftigerweise erwarten können, unterscheidet sich stark von dem, was Sie auf einer Regierungs-Website oder der Website eines Bauunternehmens erwarten können. Die gleichen erstaunlichen Effekte, die auf der Website eines Videospiels gut passen würden, würden auf einer Regierungs-Website beispielsweise unnötig oder fehl am Platz wirken. Berücksichtigen Sie den Kontext und die Erwartungen, die für Ihre Website gelten, und ob die Menge der von Ihnen verwendeten Animationen in Ihr Design passt.
Bieten Sie eine Möglichkeit, potenziell problematische Bewegungsanimationen für Benutzer zu deaktivieren
Wenn Sie Bewegungen in Ihrem Produkt haben, die für Menschen mit Bewegungsempfindlichkeiten ein Auslöser sein können, ist es verantwortungsvoll, ihnen eine Möglichkeit zu bieten, diese auslösenden Animationen zu vermeiden. Basierend auf der Definition der WCAG sollte jede Effekte, die als Bewegungsanimation betrachtet werden kann, eine reduzierte Version beinhalten.
Parallax-Effekte sind ein gutes Beispiel. Diese sind basierend auf meiner eigenen Forschung universell problematisch für Menschen mit Bewegungsempfindlichkeiten, und dennoch ist es immer noch eine sehr beliebte Technik. Obwohl es unrealistisch wäre, ein Ende aller Parallax-Effekte zu fordern, erfordert die verantwortungsvolle Implementierung von Parallax, dass Ihre Benutzer eine gewisse Kontrolle darüber haben, diese auslösenden Bewegungen zu deaktivieren.
Typischerweise wird dies so interpretiert, dass eine Umschaltfunktion, eine Einstellung oder eine Präferenz für Benutzer enthalten ist, um ihre Präferenz für reduzierte Bewegungen anzugeben, und reduzierte Versionen dieser Bewegungsanimationseffekte bereitgestellt werden, wenn sie aktiviert sind. Die Netlify 1 Million Devs-Website ist ein Beispiel für eine Bewegungs-Umschaltfunktion in Aktion, und die offizielle Animal Crossing-Website hat ebenfalls eine.
Nutzen Sie die Funktion „Bewegung reduzieren“
Websites oder Apps, die nicht stark von großen Mengen an Bewegung abhängen, stellen möglicherweise fest, dass eine benutzerdefinierte Umschaltfunktion für sie nicht die richtige Strategie ist, und nutzen stattdessen allein die `prefers-reduced-motion`-Media-Query. Dies ermöglicht es Ihnen, eine reduzierte Version stark animierter Inhalte bereitzustellen, wenn diese Präferenz global über das Betriebssystem des Benutzers vorhanden ist. Es ist auch eine Einstellung, die sie an einer Stelle vornehmen können und die sich auf eine Vielzahl von Inhalten auswirkt, auf die sie stoßen. Das macht es zu einem großartigen Werkzeug für uns, um die Bedürfnisse eines Benutzers nach reduzierter Bewegung zu erkennen und darauf zu reagieren.
Ich habe über die Verwendung von prefers-reduced-motion im Detail bei Smashing Magazine geschrieben, und es wurde auch von anderen Artikeln auf dieser Website behandelt. Kurz gesagt, es ermöglicht uns, die OS-weite Bewegungseinstellung einer Person über eine Media-Query abzurufen. Wir können darauf in CSS oder JavaScript zugreifen und den zurückgegebenen Wert verwenden, um eine reduzierte Bewegungserfahrung für diejenigen bereitzustellen, die sie wünschen. Zum Beispiel könnten wir dies tun, um eine reduzierte Bewegungsvariante einer hüpfenden CSS-Animation zu erstellen:
/* A constant bouncing motion effect applied to the title */
h2 {
animation: bouncing 1.5s linear infinite alternate;
}
/* Replace it with a safer effect when prefers-reduced-motion returns true */
@media (prefers-reduced-motion: reduce) {
h2 {
animation: fade 0.5s ease-in both;
}
}Einige Websites entscheiden sich dafür, sowohl eine benutzerdefinierte Umschaltfunktion als auch Präferenzen für reduzierte Bewegungen zu kombinieren. Wenn Sie die Website mit aktivierter Einstellung für reduzierte Bewegungen in Ihren Betriebssystemeinstellungen besuchen, erhalten Sie automatisch den Modus für reduzierte Bewegungen. Dieser zweigleisige Ansatz ist eine großartige Strategie für Websites mit großen Mengen an Bewegung. Marcy Sutton beschreibt die Grundlagen der Einrichtung dieses Ansatzes in ihrem egghead.io-Kurs sowie in diesem CodePen-Demo.
Nutzen Sie diese Richtlinien für Ihr nächstes Animationsprojekt
Das ist alles, was die WCAG über Animationen sagt, an einem Ort erklärt. Ich hoffe, dieser Artikel hilft Ihnen, Ihre Webanimationsarbeiten souverän barrierefrei zu gestalten. Manchmal erfordert es ein wenig mehr Aufwand, aber dieser zusätzliche Aufwand lohnt sich absolut, wenn er bedeutet, dass Sie die Anzahl der Personen erweitert haben, die sinnvoll mit Ihrer Website interagieren können.
Dieser Artikel konzentrierte sich auf die spezifischen Empfehlungen für Animationen, aber Animation ist nicht der einzige Bereich, in dem Überlegungen zur Barrierefreiheit einen großen Einfluss haben können. Es gibt einige großartige Ressourcen zur Barrierefreiheit, die eine ganzheitlichere Sichtweise auf Barrierefreiheit abdecken. Eines meiner Lieblingswerke ist das Buch Accessibility for Everyone von Lara Kalbag. Websites wie WebAIM und das A11y Project sind großartige Anlaufstellen für eine Fülle von Ressourcen. Wenn Sie viele Ihrer Animationsarbeiten mit SVG durchführen, ist Heathers Artikel zur SVG-Barrierefreiheit ebenfalls eine gute Ressource. Ich empfehle dringend, sich diese Ressourcen anzusehen, falls Sie das noch nicht getan haben.
Fantastische Arbeit bei der Dokumentation!
Ich habe eine Website gesehen, die ein Video eingebettet hatte, das Probleme für eine Person mit empfindlichem Sehvermögen verursachte. Vielleicht könnte eine kleine Erwähnung der Videonutzung und Probleme im Zusammenhang mit empfindlichem Sehvermögen oder sogar epileptischen Anfällen eine schöne Abrundung darstellen.
Vielen Dank dafür! Ein großartiger, sehr klar erklärter Artikel. Wurde geteilt :)
Sollten Sie eine Beschreibung dessen, was in der Animation passiert, für Menschen mit eingeschränktem Sehvermögen aufnehmen? Wenn ja, wie detailliert müsste die Beschreibung sein? Jede Aktion, die auftritt, oder nur eine allgemeine Beschreibung dessen, was die Animation zu vermitteln versucht?