Animation und Bewegung

Haben Sie sich schon einmal im Auto, Boot oder Flugzeug befunden und plötzlich das Gefühl gehabt, die Welt dreht sich? Oder hatten Sie eine so starke Migräne, dass die Animationen auf Ihrem Smartphone oder Tablet, die Sie eigentlich erfreuen sollten, Sie plötzlich krank gemacht haben? Vielleicht waren Sie auch schon immer empfindlich gegenüber allen Arten von Bewegungen? Das sind Beispiele für verschiedene Arten von vestibulären Störungen.

Im Alter von 40 Jahren haben über 35% der Erwachsenen eine Form von vestibulärer Dysfunktion erlebt. Dies kann zu vorübergehendem Schwindel, migränebedingtem Schwindel oder einer dauerhaften vestibulären Behinderung führen.

Viele Menschen empfinden bewegte, blinkende oder scrollende Inhalte nicht nur als Auslöser für Schwindel, sondern auch als störend. Menschen mit ADHD und anderen Aufmerksamkeitsdefizitstörungen können so von Ihren animierten Elementen abgelenkt werden, dass sie vergessen, warum sie Ihre Website oder App überhaupt aufgerufen haben.

In diesem Modul sehen wir uns einige Möglichkeiten an, wie Sie Menschen mit allen Arten von bewegungsbedingten Störungen besser unterstützen können.

Blinkende und bewegte Inhalte

Wenn Sie Animationen und Bewegungen erstellen, fragen Sie sich, ob die Bewegung des Elements übertrieben ist. Wenn beispielsweise Farben von dunkel nach hell flackern oder schnelle Bewegungen auf dem Bildschirm auftreten, kann dies bei Menschen mit photosensitiver Epilepsie zu Anfällen führen. Schätzungen zufolge leiden 3% der Menschen mit Epilepsie an Photosensibilität. Frauen und jüngere Menschen sind häufiger betroffen.

In den WCAG-Richtlinien zu blinkenden Inhalten wird Folgendes empfohlen:

• Blinken mehr als dreimal pro Sekunde
• Blinken unterhalb der allgemeinen Blink- und Rotblitzschwelle

Diese Blitze können im besten Fall dazu führen, dass eine Webseite nicht verwendet werden kann, im schlimmsten Fall zu einer Erkrankung.

Bei extremen Bewegungen müssen Sie diese unbedingt mit dem Photosensitive Epilepsy Analysis Tool (PEAT) testen. PEAT ist ein kostenloses Tool, mit dem Sie feststellen können, ob die Inhalte, Videos oder Animationen auf dem Bildschirm wahrscheinlich Anfälle verursachen. Nicht alle Inhalte müssen von PEAT bewertet werden. Inhalte, die blinkende oder schnelle Übergänge zwischen hellen und dunklen Hintergrundfarben enthalten, sollten jedoch zur Sicherheit bewertet werden.

Eine weitere Frage, die Sie sich zu Animationen und Bewegungen stellen sollten, ist, ob die Bewegung des Elements für das Verständnis der Inhalte oder Aktionen auf dem Bildschirm erforderlich ist. Wenn dies nicht der Fall ist, sollten Sie alle Bewegungen – auch Mikrobewegungen – aus dem Element entfernen, das Sie erstellen oder gestalten.

Angenommen, Sie sind der Meinung, dass die Bewegung des Elements nicht erforderlich ist, aber die allgemeine Nutzererfahrung verbessern könnte, oder Sie können die Bewegung aus einem anderen Grund nicht entfernen. In diesem Fall sollten Sie die WCAG-Richtlinien zu Bewegungen befolgen . Gemäß den Richtlinien müssen Sie eine Option für Nutzer erstellen, mit der sie Bewegungen pausieren, beenden oder ausblenden können. Dies gilt für nicht erforderliche bewegte, blinkende oder scrollende Elemente, die automatisch gestartet werden, länger als fünf Sekunden dauern und Teil anderer Seitenelemente sind.

Bewegungen pausieren, beenden oder ausblenden

Fügen Sie Ihrer Seite einen Mechanismus zum Pausieren, Beenden oder Ausblenden hinzu, damit Nutzer potenziell problematische Bewegungsanimationen deaktivieren können. Sie können dies auf Bildschirm- oder Elementebene tun.

Angenommen, Ihr digitales Produkt enthält viele Animationen. Fügen Sie einen zugänglichen JavaScript-Schalter hinzu, damit Nutzer die Nutzung selbst steuern können. Wenn der Schalter auf „Bewegung aus“ gestellt ist, werden alle Animationen auf diesem und allen anderen Bildschirmen angehalten.

Media-Queries verwenden

Sie können nicht nur Animationen selektiv einsetzen, Nutzern Optionen zum Pausieren, Beenden und Ausblenden von Bewegungen bieten und unendliche Animationsschleifen vermeiden, sondern auch eine Media-Query hinzufügen, die auf Bewegungen ausgerichtet ist. So haben Nutzer noch mehr Auswahlmöglichkeiten bei der Anzeige auf dem Bildschirm.

@prefers-reduced-motion

Ähnlich wie bei den farbbezogenen Media-Queries im Farbmodul prüft die @prefers-reduced-motion Media-Query die Einstellungen des Betriebssystems des Nutzers in Bezug auf Animationen.

Nutzer können Anzeigeeinstellungen festlegen, um Bewegungen zu reduzieren. Diese Einstellungen sind je nach Betriebssystem unterschiedlich und können positiv oder negativ formuliert sein. Mit `@prefers-reduced-motion` können Sie eine Website erstellen, die diese Einstellungen berücksichtigt.

Unter macOS und Android aktiviert der Nutzer die Einstellung, um Bewegungen zu reduzieren. Unter macOS kann ein Nutzer Bewegung reduzieren unter „Einstellungen“ > „Bedienungshilfen“ > „Anzeige“ festlegen. Die Android-Einstellung lautet Animationen entfernen. Unter Windows ist die Einstellung positiv formuliert als Animationen anzeigen und ist standardmäßig aktiviert. Ein Nutzer muss diese Einstellung deaktivieren, um Bewegungen zu reduzieren.

Um die Zugänglichkeit für Personen zu gewährleisten, die Schwierigkeiten mit Bewegungen haben, sollten auch Animationen, die kürzer als die in den WCAG 2.0 AA-Richtlinien festgelegte Schwelle von 5 Sekunden sind, mit Vorsicht behandelt werden. Die zuverlässigste Methode besteht darin, Nutzern, die eine Präferenz für reduzierte Bewegungen angegeben haben, die volle Kontrolle über Animationen zu geben. Sie können die Animation mit speziellen Steuerelementen wie einer Wiedergabe- und einer Pausenschaltfläche starten und beenden.

Progressive Verbesserung für Bewegungen

Als Designer und Entwickler haben wir viele Entscheidungen zu treffen, darunter Standardbewegungszustände und wie viel Bewegung angezeigt werden soll. Sehen Sie sich das letzte Beispiel zu Bewegungen noch einmal an.

Angenommen, wir entscheiden, dass die Animation für das Verständnis der Inhalte auf dem Bildschirm nicht erforderlich ist. In diesem Fall können wir den Standardzustand auf die Animation mit reduzierten Bewegungen anstelle der Version mit vollständigen Bewegungen festlegen. Sofern Nutzer nicht ausdrücklich Animationen anfordern, sind diese deaktiviert.

Wir können nicht vorhersagen, bei welcher Bewegungsstufe Probleme für Menschen mit Anfällen, vestibulären und anderen visuellen Störungen auftreten. Schon eine geringe Bewegung auf dem Bildschirm kann Schwindel, verschwommenes Sehen oder Schlimmeres auslösen. Im folgenden Beispiel ist daher standardmäßig keine Animation festgelegt.

Gestaffelte Media-Queries

Sie können mehrere Media-Queries verwenden, um Nutzern noch mehr Auswahlmöglichkeiten zu bieten. Sie können @prefers-color-scheme, @prefers-contrast und @prefers-reduced-motion zusammen verwenden.

Nutzer selbst entscheiden lassen

Es kann Spaß machen, Animationen in unsere digitalen Produkte einzubauen, um Nutzer zu begeistern. Wir müssen jedoch bedenken, dass einige Nutzer von diesen Designs betroffen sein können. Bewegungsempfindlichkeit kann jeden betreffen und von leichtem Unbehagen bis hin zu einer schwächenden Krankheit oder einem Anfall führen.

Sie können verschiedene Tools verwenden, damit Nutzer selbst entscheiden können, was für sie am besten ist, anstatt zu raten, wie viel Bewegung zu viel ist. Fügen Sie beispielsweise einen Schalter hinzu, um Animationen auf Ihrer Website oder in Ihrer Web-App zu aktivieren oder zu deaktivieren. Standardmäßig sollte dieser Schalter auf Aus gestellt sein.