Animation und Bewegung

Waren Sie schon einmal in einem Auto, Boot oder Flugzeug unterwegs und haben Sie plötzlich die Welt gespürt, Drehen? Oder ich hatte eine Migräne, die so schlimm war, dass Animationen auf deinem Smartphone oder Tablet „begeistert“ dich plötzlich krank? Oder vielleicht waren Sie schon immer empfindlich auf alle Bewegungen reagieren? Dies sind Beispiele für verschiedene Arten von vestibuläre Erkrankungen.

Im Alter von 40 Jahren haben über 35% der Erwachsenen Vestibuläre Dysfunktion. Dies kann zu einem vorübergehenden Schwindelgefühl, Schwindel durch Migräne oder dauerhafte vestibuläre Behinderung.

Viele Menschen stoßen aber nicht nur auf Schwindel, sondern bewegt auch, blinzelt oder scrollt ob Ihre Inhalte ablenkend sind. Personen mit ADHS und anderen Aufmerksamkeitsdefizitstörungen durch Ihre animierten Elemente, die vergessen werden, warum sie Ihre Website oder App den ersten Platz einstuft.

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

Blinkende und bewegliche 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 nach hell flackern, oder schnelle Bewegungen auf dem Bildschirm zu Anfällen bei Menschen mit photosensitiver Epilepsie führen. Es wird geschätzt, dass 3% der Menschen mit Epilepsie Fotosensibilität aufweisen. Sie kommt häufiger bei Frauen und jüngeren Menschen vor.

In den Richtlinien der WCAG zum Thema Blinken wird Folgendes empfohlen:

• Blinkt mehr als dreimal in einer Sekunde
• Blinkt unterhalb der Grenzwerte für allgemeines Blitzen und für rotes Blitzen festlegen.

Diese Flashs können im besten Fall dazu führen, dass eine Webseite nicht genutzt werden kann. Im schlimmsten Fall zu einer Krankheit führen.

Bei extremen Bewegungen ist es unbedingt erforderlich, dass Sie die Photosensitive Epilepsy Analysis Tool (PEAT) PEAT ist ein kostenloses Tool, mit dem sich Inhalte, Videos oder Animationen auf dem Bildschirm führen wahrscheinlich zu Krampfanfällen. Nicht alle Inhalte müssen von PEAT bewertet werden. aber Inhalte mit blinkenden oder schnellen Übergängen zwischen hell und dunkel sollten die Hintergrundfarben überprüft werden.

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

Angenommen, Sie sind der Meinung, dass die Bewegung des Elements nicht unbedingt erforderlich ist, aber die Bewegung verbessern könnte. die User Experience insgesamt, oder Sie können die Bewegung nicht für eine andere Grund. In diesem Fall sollten Sie sich an die WCAG- Richtlinien zu Bewegungselementen. In den Richtlinien ist festgelegt, dass Sie Nutzern eine Option bieten müssen, Bewegung kann ausgeblendet werden, wenn unwesentliche Elemente wie sich bewegende, blinkende oder scrollende Elemente sind, werden automatisch gestartet, dauern mehr als fünf Sekunden und sind Teil einer anderen Seite. Elemente.

Bewegung pausieren, stoppen oder ausblenden

Pausieren, Stoppen oder Ausblenden hinzufügen auf Ihrer Seite, mit der Nutzer potenziell problematische Seiten Bewegungsanimation. Das ist auf Bildschirm- oder Elementebene möglich.

Angenommen, Ihr digitales Produkt enthält viele Animationen. Du kannst eine zugängliche JavaScript-Ein/Aus-Schaltfläche hinzufügen damit Nutzende ihre Erfahrung kontrollieren können. Wenn die Schaltfläche zu „Bewegung aus“, sind alle Animationen auf diesem und allen anderen Bildschirmen eingefroren.

Medienabfragen verwenden

Sie sind nicht nur wählerisch bei Animationen, zum Pausieren, Stoppen, Verbergen von Bewegungen und zum Vermeiden von Endlosschleifen von Animationen können Sie eine bewegungsorientierte Medienabfrage hinzufügen. So erhalten Ihre Nutzer was auf dem Bildschirm angezeigt wird.

@prefers-reduced-motion

Ähnlich wie bei den Medienabfragen mit Schwerpunkt auf Farben im Farbmodul prüft die Medienabfrage „@prefers-reduced-motion“ die Betriebssystemeinstellungen des Nutzers für die Animation.

Nutzende können Anzeigeeinstellungen festlegen, um Bewegungen zu reduzieren. Diese Einstellungen sind unterscheiden sich je nach Betriebssystem und können positiv oder negativ dargestellt werden. Mit @prefers-reduced-motion können Sie eine Website entwerfen, das diese Präferenzen berücksichtigt.

Unter macOS und Android aktiviert der Nutzer die Einstellung, um Bewegungen zu reduzieren. Unter macOS: kann Nutzer unter „Einstellungen“ die Option Bewegungen reduzieren Bedienungshilfen > Anzeige. Die Android-Einstellung ist Animationen entfernen. Unter Windows ist die Einstellung Animationen anzeigen hinzufügen. Diese Option ist standardmäßig aktiviert. Ein Nutzer muss um Bewegungen zu reduzieren.

Alternativ können Sie, wie in den nächsten Beispielen gezeigt, alle Ihre Animationen so codieren, dass sie sich innerhalb von fünf Sekunden oder weniger nicht mehr bewegen, anstatt in einer Endlosschleife abgespielt zu werden.

Progressive Enhancement für Bewegung

Als Designschaffende und Entwickelnde müssen wir viele Entscheidungen treffen, darunter Standardstatus für die Bewegung und wie viel Bewegung 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 des Bildschirminhalts unnötig ist. In diesem Fall können wir als Standardeinstellung die Animation mit reduzierter Bewegung anstelle der Vollbewegungsversion festlegen. Animationen sind deaktiviert, es sei denn, der Nutzer fragt ausdrücklich nach Animationen.

Wir können nicht vorhersagen, welches Ausmaß der Bewegung Menschen mit Krampfanfälle, vestibuläre und andere visuelle Erkrankungen. Selbst ein wenig Bewegung auf dem Bildschirm kann Schwindel, verschwommenes Sehen oder Verschlimmerung hervorrufen. In der Im folgenden Beispiel verwenden wir standardmäßig keine Animation.

Medienabfragen mit mehreren Ebenen

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

Nutzern die Wahl lassen

Natürlich kann es Spaß machen, Animationen in unsere digitalen Produkte einzubauen. dass einige Menschen von diesen Designs betroffen sein werden. Die Bewegungsempfindlichkeit kann jeden betreffen, von leichten Beschwerden bis hin zu eine schädigende Krankheit oder einen Krampfanfall.

Es gibt verschiedene Tools, mit denen Nutzer selbst entscheiden können, welches Tool am besten anstatt zu raten, wie viel Bewegung zu viel ist. Fügen Sie beispielsweise Ein/Aus-Schaltfläche, um Animationen auf Ihrer Website oder in Ihrer Web-App zu aktivieren oder zu deaktivieren. Erwägen Sie diese Option standardmäßig auf Aus gesetzt.

Wissen testen

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