Animation und Bewegung

Waren Sie schon einmal in einem Auto, Boot oder Flugzeug unterwegs und hatten plötzlich das Gefühl, dass sich die Welt dreht? Oder hatten Sie eine so schlimme Migräne, dass Sie plötzlich von den Animationen auf Ihrem Smartphone oder Tablet, die Sie eigentlich erfreuen sollen, krank werden? Oder warst du schon immer empfindlich auf alle Bewegungen gestoßen? Dies 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 Funktionsstörung. Dies kann zu einem vorübergehenden Schwindelgefühl, Schwindel aufgrund von Migräne oder einer dauerhaften Vestibulärerkrankung führen.

Neben der Auslösung von Schwindel finden viele Nutzer bewegte, blinkende oder scrollende Inhalte ablenkend. Personen mit ADHS und anderen Aufmerksamkeitsdefizitstörungen können von Ihren animierten Elementen so abgelenkt werden, dass sie vergessen, warum sie Ihre Website oder App überhaupt aufgerufen haben.

In diesem Modul sehen wir uns an, wie wir 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. Beispielsweise können Farben, die von dunkel zu hell flackern, oder schnelle Bewegungen auf dem Bildschirm, bei Menschen mit photosensitiver Epilepsie Anfälle verursachen. Schätzungen zufolge leiden 3% der Menschen mit Epilepsie unter Fotosensibilität und tritt häufiger bei Frauen und jüngeren Menschen auf.

In den Richtlinien zu Blinkeffekten der WCAG wird Folgendes empfohlen:

• Blinkt mehr als dreimal in einer Sekunde
• Blinkt unter dem Grenzwert für allgemeine und rote Blinksignale.

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

Bei extremen Bewegungen ist es unbedingt erforderlich, dass Sie sie mit dem Photosensitive Epilepsy Analysis Tool (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 mit PEAT bewertet werden. Inhalte mit blinkenden oder schnellen Übergängen zwischen hellen und dunklen Hintergrundfarben sollten jedoch zur Sicherheit bewertet werden.

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

Angenommen, Sie sind der Meinung, dass die Bewegung des Elements nicht unbedingt erforderlich ist, aber das Gesamterlebnis des Nutzers verbessern könnte, oder Sie können die Bewegung aus einem anderen Grund nicht entfernen. In diesem Fall solltest du dich an die Richtlinien zur Bewegung der WCAG halten. Gemäß den Richtlinien müssen Sie Nutzern die Möglichkeit geben, Bewegungen für folgende Elemente zu pausieren, anzuhalten oder auszublenden: nicht notwendige bewegte, blinkende oder scrollende Elemente, die automatisch gestartet werden, länger als fünf Sekunden dauern und Teil anderer Seitenelemente sind.

Bewegung pausieren, stoppen oder ausblenden

Fügen Sie Ihrer Seite eine Funktion hinzu, mit der Nutzer Animationen pausieren, beenden oder ausblenden können, um potenziell störende Bewegungsanimationen zu deaktivieren. Das ist auf Bildschirm- oder Elementebene möglich.

Angenommen, Ihr digitales Produkt enthält viele Animationen. Sie können eine barrierefreie JavaScript-Ein/Aus-Schaltfläche hinzufügen, damit Nutzer die Funktion selbst aktivieren und deaktivieren können. Wenn die Schaltfläche auf „Bewegung aus“ gesetzt ist, werden alle Animationen auf diesem und allen anderen Bildschirmen eingefroren.

Medienabfragen verwenden

Achten Sie darauf, dass Sie Ihre Animationen mit Bedacht einsetzen, Nutzern die Möglichkeit geben, Bewegungen zu pausieren, anzuhalten oder auszublenden, und vermeiden Sie endlose Animationsschleifen. Sie können auch eine bewegungsorientierte Mediaabfrage hinzufügen. So haben Ihre Nutzer noch mehr Auswahlmöglichkeiten, was auf dem Bildschirm angezeigt wird.

@prefers-reduced-motion

Ähnlich wie bei den farbenbezogenen Media-Abfragen im Farbmodul werden bei der @prefers-reduced-motion-Media-Abfrage die Betriebssystemeinstellungen des Nutzers im Zusammenhang mit Animationen geprüft.

Ein Nutzer kann die Anzeigeeinstellungen so festlegen, dass Bewegungen reduziert werden. Diese Einstellungen unterscheiden sich je nach Betriebssystem und können positiv oder negativ sein. Mit @prefers-reduced-motion können Sie eine Website entwerfen, die diese Einstellungen berücksichtigt.

Unter macOS und Android aktiviert der Nutzer die Einstellung, um Bewegungen zu reduzieren. Unter macOS können Nutzer die Option Bewegung reduzieren unter „Einstellungen“ > „Bedienungshilfen“ > „Display“ festlegen. Unter Android lautet die Einstellung Animationen entfernen. Unter Windows wird die Einstellung positiv als Animationen anzeigen bezeichnet. Sie ist standardmäßig aktiviert. Nutzende müssen diese Einstellung deaktivieren, um Bewegung zu reduzieren.

Alternativ können Sie, wie in den folgenden Beispielen gezeigt, alle Animationen so programmieren, dass sie innerhalb von fünf Sekunden oder weniger anhalten, anstatt in einem endlosen Loop zu laufen.

Progressive Verbesserung für Bewegung

Als Designer und Entwickler haben wir viele Entscheidungen zu treffen, z. B. die Standardbewegungszustände und die Menge der Bewegung, die angezeigt werden soll. Sehen wir uns noch einmal das letzte Beispiel zur Bewegung 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 Standardstatus auf die Animation mit reduzierter Bewegung anstelle der Vollbewegungsversion festlegen. Die Animationen sind deaktiviert, es sei denn, die Nutzer fragen ausdrücklich nach Animationen.

Wir können nicht vorhersagen, bei welcher Bewegungsgeschwindigkeit bei Personen mit Krampfanfällen, vestibulären Störungen und anderen Sehstörungen Probleme auftreten. Schon eine geringe Bewegung auf dem Bildschirm kann Schwindel, verschwommenes Sehen oder Schlimmeres auslösen. Im folgenden Beispiel verwenden wir also standardmäßig keine Animation.

Mehrere Medienabfragen

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 zusammen.

Nutzern die Wahl lassen

Auch wenn es Spaß machen kann, Animationen in unsere digitalen Produkte einzubauen, um die Nutzer zu begeistern, ist es wichtig, dass wir uns daran erinnern, dass einige Menschen von diesen Designs betroffen sein werden. Die Bewegungsempfindlichkeit kann jeden treffen und von leichten Unwohlsein bis hin zu einer lähmenden Krankheit oder einem Anfall führen.

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

Wissenstest

Testen Sie Ihr Wissen über die Barrierefreiheit in den Bereichen Bewegung und Animation.