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 so starke Migräne, dass die Animationen auf Ihrem Smartphone oder Tablet, die Sie eigentlich erfreuen sollten, Ihnen plötzlich Übelkeit bereitet haben? Vielleicht waren Sie auch schon immer empfindlich gegenüber allen Arten von Bewegungen? Das sind Beispiele für verschiedene Arten von Gleichgewichtsstörungen.

Im Alter von 40 Jahren haben über 35% der Erwachsenen eine Form von Gleichgewichtsstörung erlebt. Dies kann zu vorübergehendem Schwindel, migränebedingtem Schwindel oder einer dauerhaften Gleichgewichtsstörung führen.

Neben Schwindel können viele Menschen bewegte, blinkende oder scrollende Inhalte als störend empfinden. 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 besucht 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. Das ist auf Bildschirm- oder Elementebene möglich.

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.

Medienabfragen 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 auf Bewegungen ausgerichtete Medienabfrage hinzufügen. So haben Nutzer noch mehr Auswahlmöglichkeiten bei der Anzeige auf dem Bildschirm.

@prefers-reduced-motion

Ähnlich wie bei den farbbezogenen Medienabfragen im Farbmodulprüft die @prefers-reduced-motion Medienabfrage 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 entwerfen, die diese Einstellungen berücksichtigt.

Unter macOS und Android wird die Einstellung aktiviert, 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: Animationen anzeigen 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 Probleme 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 noch einmal das letzte Beispiel zu Bewegungen 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 reduzierter Bewegung anstelle der Version mit voller Bewegung festlegen. Sofern Nutzer nicht ausdrücklich Animationen anfordern, werden sie deaktiviert.

Wir können nicht vorhersagen, bei welcher Bewegungsintensität Probleme für Menschen mit Krampfanfällen, Gleichgewichtsstörungen 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 Medienabfragen

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

Nutzern die Wahl lassen

Es kann Spaß machen, Animationen in unsere digitalen Produkte einzubauen, um Nutzer zu begeistern. Wir müssen jedoch bedenken, dass einige Menschen von diesen Designs betroffen sein können. Bewegungsempfindlichkeit kann jeden betreffen und von leichtem Unbehagen bis hin zu einer schwächenden Krankheit oder einem Krampfanfall 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.