Animation und Bewegung

Waren Sie schon einmal in einem Auto, Boot oder Flugzeug und spüren, wie sich die Welt dreht? Oder hatten Sie eine Migräne, die so schlimm ist, dass Animationen auf Ihrem Telefon oder Tablet, die Sie zur "Begeisterung" erstellt haben, Sie plötzlich krank werden? Oder haben Sie vielleicht schon immer sensibel auf alle Arten von Bewegungen reagiert? Dies sind Beispiele für verschiedene Arten von vestibulären Störungen.

Im Alter von 40 Jahren hatten über 35% der Erwachsenen eine Form von Vestibuläre Dysfunktion. Dies kann zu einem vorübergehenden Schwindel, Schwindel durch Migräne oder einer dauerhaften vestibulären Behinderung führen.

Neben Schwindelgefühle empfinden viele Menschen auch Inhalte, die sich bewegen, blinzeln oder scrollen, als störend empfunden. Menschen mit ADHS und anderen Aufmerksamkeitsdefizit-Störungen sind möglicherweise so von animierten Elementen abgelenkt, dass sie vergessen, warum sie überhaupt Ihre Website oder App besucht haben.

In diesem Modul sehen wir uns an, wie wir Menschen mit beweglichen Störungen besser unterstützen können.

Blinkende und sich bewegende Inhalte

Wenn Sie Animationen und Bewegungen erstellen, sollten Sie sich fragen, ob die Bewegung des Elements übermäßig ist. Beispielsweise können Farben, die von dunkel zu hell flackern, oder schnelle Bewegungen auf dem Bildschirm zu Krampfanfällen bei Menschen mit fotosensitiver Epilepsie führen. Schätzungsweise 3% der epileptischen Menschen leiden unter Fotossensitivität, was häufiger bei Frauen und jüngeren Menschen auftritt.

In den Richtlinien zu Flashing der WCAG wird Folgendes nicht empfohlen:

• Blinkt mehr als dreimal in einer Sekunde
• Blinkt unter dem Grenzwert für das allgemeine Blitzlicht und für rotes Blitzlicht.

Solche Blitze können im besten Fall dazu führen, dass Sie eine Webseite nicht verwenden können, oder im schlimmsten Fall zu einer Krankheit führen.

Bei extremen Bewegungen sollten Sie sie unbedingt mit dem Fotosensitiven Epilepsie-Analysetool (PEAT) testen. PEAT ist ein kostenloses Tool, mit dem Sie feststellen können, ob der Inhalt, das Video oder die Animationen auf dem Bildschirm wahrscheinlich Anfälle verursachen. Nicht alle Inhalte müssen von PEAT ausgewertet werden. Sie sollten jedoch blinkende oder schnelle Übergänge zwischen hellen und dunklen Hintergrundfarben prüfen, um auf Nummer sicher zu gehen.

Eine weitere Frage, die Sie sich zu Animation und Bewegung stellen sollten, ist, ob die Bewegung des Elements für das Verständnis des Inhalts oder der Aktionen auf dem Bildschirm unerlässlich ist. Wenn es nicht unerlässlich ist, sollten Sie alle Bewegungen – auch Mikrobewegungen – von dem Element entfernen, das Sie erstellen oder entwerfen.

Angenommen, Sie glauben, dass die Bewegung des Elements nicht unerlässlich ist, aber die Gesamterfahrung für den Nutzer verbessern könnte, oder Sie können die Bewegung aus einem anderen Grund nicht entfernen. Halte dich in diesem Fall an die Richtlinien der WCAG zur Bewegung. In den Richtlinien ist festgelegt, dass Nutzer eine Option zum Pausieren, Stoppen oder Ausblenden von Bewegungen erstellen müssen, wenn die Elemente nicht unbedingt zu bewegen, blinken oder scrollen, die automatisch starten, länger als fünf Sekunden dauern und Teil anderer Seitenelemente sind.

Bewegung pausieren, stoppen oder ausblenden

Füge deiner Seite einen Mechanismus zum Pausieren, Stoppen 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. Sie können eine einblendbare JavaScript-Ein-/Aus-Schaltfläche hinzufügen, über die Nutzer ihre Funktionen steuern können. Wenn die Schaltfläche auf „Bewegung aus“ gestellt ist, werden alle Animationen auf diesem und allen anderen Bildschirmen eingefroren.

Medienabfragen verwenden

Sie sollten Ihre Animationen nicht nur selektiv gestalten, Ihren Nutzern Optionen zum Pausieren, Stoppen und Ausblenden von Bewegungen geben und Endlosschleifen für Animationen vermeiden, sondern auch eine auf Bewegungen ausgerichtete Medienabfrage hinzufügen. Dies gibt den Nutzenden noch mehr Auswahlmöglichkeiten, was auf dem Bildschirm angezeigt wird.

@prefers-reduced-motion

Ähnlich wie bei den Medienabfragen mit Farbfokus im Farbmodul prüft die Medienabfrage „@prefers-reduced-motion“ die Betriebssystemeinstellungen des Nutzers in Bezug auf die Animation.

Nutzer können Displayeinstellungen festlegen, um Bewegungen zu reduzieren. Diese Einstellungen sind je nach Betriebssystem unterschiedlich und können positiv oder negativ umrandet werden. Mit @prefers-reduced-motion kannst du eine Website erstellen, die diese Einstellungen berücksichtigt.

Unter macOS und Android aktiviert der Nutzer die Einstellung, um Bewegungen zu reduzieren. Unter macOS können Nutzer Bewegungen reduzieren unter „Einstellungen“ > „Bedienungshilfen“ > „Display“ festlegen. Die Android-Einstellung ist Animationen entfernen. Unter Windows ist die Einstellung positiv zu sehen Animationen anzeigen, was standardmäßig aktiviert ist. Um Bewegungen zu reduzieren, muss diese Einstellung deaktiviert werden.

Alternativ können Sie, wie in den nächsten Beispielen gezeigt, alle Ihre Animationen so programmieren, dass sie sich innerhalb von fünf Sekunden oder weniger stoppen, anstatt sie in einer Endlosschleife abzuspielen.

Progressive Enhancement für Bewegung

Als Designer und Entwickler haben wir eine große Auswahl, einschließlich Standardbewegungsstatus und wie viel Bewegung angezeigt werden soll. Schauen wir uns das letzte Beispiel zur Bewegung noch einmal an.

Angenommen, wir entscheiden, dass die Animation zum Verständnis des Inhalts auf dem Bildschirm nicht erforderlich ist. In diesem Fall können wir den Standardzustand auf die Animation mit reduzierten Bewegungen statt auf die Version mit voller Bewegung setzen. Animationen sind deaktiviert, sofern sie nicht ausdrücklich nach Animationen gefragt werden.

Wir können nicht vorhersagen, welche Bewegung bei Menschen mit Krampfanfällen, vestibulären und anderen Sehstörungen zu Problemen führen wird. Selbst eine geringe Bewegung auf dem Bildschirm kann zu Schwindel, verschwommenem Sehen oder Schlimmerem führen. Daher verwenden wir im folgenden Beispiel standardmäßig keine Animation.

Medienabfragen mit Ebenen

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

Nutzer können auswählen

Es kann zwar Spaß machen, Animationen in unsere digitalen Produkte zu integrieren, um die Nutzer zu begeistern, aber wir dürfen nicht vergessen, dass einige Menschen von diesen Designs betroffen sein werden. Die Bewegungsempfindlichkeit kann jeden treffen, von leichten Unwohlsein bis hin zu einer schwächenden Krankheit oder einem Krampfanfall.

Sie können eine Reihe verschiedener Tools verwenden, damit der Nutzer entscheiden kann, was für ihn am besten ist, anstatt zu raten, wie viel Bewegung zu viel ist. Sie können beispielsweise eine Ein-/Aus-Schaltfläche hinzufügen, um die Animation auf Ihrer Website oder in Ihrer Webanwendung zu aktivieren oder zu deaktivieren. Sie können sie standardmäßig auf Aus stellen.

Überprüfen Sie Ihr Wissen

Testen Sie Ihr Wissen über die Barrierefreiheit von Bewegungen und Animationen.