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 waren Sie schon immer empfindlich gegenüber allen Arten von Bewegung? Dies sind Beispiele für verschiedene Arten von vestibulären Störungen.

Bis zum Alter von 40 Jahren haben über 35% der Erwachsenen eine vestibuläre Dysfunktion. Dies kann zu einer vorübergehenden Schwindelattacke, einem durch Migräne verursachten Schwindel oder einer dauerhaften vestibulären Beeinträchtigung führen.

Neben der Auslösung von Schwindel finden viele Nutzer bewegte, blinkende oder scrollende Inhalte ablenkend. Personen mit ADHD 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 einige Möglichkeiten an, wie Sie Menschen mit allen Arten von durch Bewegung ausgelösten Erkrankungen 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 auslösen. Schätzungen zufolge leiden 3% der Menschen mit Epilepsie an Lichtempfindlichkeit. Diese ist bei Frauen und jüngeren Menschen häufiger.

In den Richtlinien zu Blinkeffekten der WCAG wird Folgendes empfohlen:

• Blinkt mehr als dreimal pro 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 die Inhalte, Videos oder Animationen auf dem Bildschirm wahrscheinlich Krampfanfälle auslösen. 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 die Nutzererfahrung insgesamt verbessern könnte, oder Sie können die Bewegung aus einem anderen Grund nicht entfernen. In diesem Fall sollten Sie die Richtlinien zu Bewegungen der WCAG einhalten. 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, anhalten 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“ gestellt 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 Medienabfrage hinzufügen. So haben Ihre Nutzer noch mehr Auswahlmöglichkeiten, was auf dem Bildschirm angezeigt wird.

@prefers-reduced-motion

Ähnlich wie bei den farbbezogenen 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 formuliert 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. Der Nutzer muss diese Einstellung deaktivieren, um die Bewegung zu reduzieren.

Um die Barrierefreiheit 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 beschriebene 5-Sekunden-Grenze sind, mit Vorsicht eingesetzt werden. Die zuverlässigste Methode besteht darin, Nutzern, die eine reduzierte Bewegung angegeben haben, die ausschließliche Kontrolle über Animationen zu geben, damit sie sie mithilfe spezieller Steuerelemente wie einer Wiedergabe- und einer Pause-Schaltfläche starten und anhalten können.

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 Version mit voller Bewegung festlegen. Sofern Nutzer nicht ausdrücklich Animationen anfordern, sind sie deaktiviert.

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

Es kann zwar Spaß machen, Animationen in unsere digitalen Produkte einzubinden, um Nutzer zu begeistern, aber wir müssen uns bewusst sein, dass einige Menschen von diesen Designs betroffen sind. Die Bewegungsempfindlichkeit kann jeden treffen und von leichten Unwohlsein bis hin zu einer lähmenden Krankheit oder einem Anfall führen.

Sie können verschiedene 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.

Wissen testen

Testen Sie Ihr Wissen über Barrierefreiheit bei Bewegungen und Animationen.