Bereitstellung einer barrierefreien Benutzererfahrung mit Animation

Providing an Accessible User Experience with Animation

Die Verwendung von Animationen im Web ist eine großartige Möglichkeit, Ihrem Design ein einzigartiges Flair zu verleihen und Ihrer Benutzererfahrung vielleicht ein wenig Freude zu verleihen. Gut gestaltete Animationen sind informativ; Sie lassen den Benutzer wissen, dass etwas passiert ist, oder werden verwendet, um den Benutzer zu einer neuen Aufgabe zu führen, die Aufmerksamkeit erfordert. Im Idealfall wären Animationen nützlich, vorhersehbar und konsistent.

Auf der anderen Seite kann ein schlechter Einsatz von Animationen ablenken, die Aufmerksamkeit von der aktuellen Aufgabe ablenken oder bei jemandem ein mulmiges und desorientiertes Gefühl hinterlassen.

Übrigens, wenn wir „Animation“ erwähnen, beziehen wir im Grunde alles mit ein, was sich auf dem Bildschirm bewegt; .gif -Bilder, Videos, Karussells und alle Seitenelemente, die sich bei jeder Art von Maus- oder Tastaturinteraktion bewegen.

Animation und Zugänglichkeit

Wie könnte sich das Hinzufügen von Animationen zu einer Website, App oder sogar einem Betriebssystem negativ auf Menschen mit Behinderungen auswirken? Hier sind ein paar Möglichkeiten:

  • Wenn es um jemanden mit einer kognitiven Beeinträchtigung geht, kann es sehr ablenkend sein, eine stark animierte Szene oder Aktivität nach Abschluss einer Aktion einzurichten oder andere bewegliche Teile auf dem Bildschirm zu haben, wie z. B. ein automatisch abspielendes Video oder eine Werbung. So sehr, dass sie vielleicht das Bedürfnis verspüren, die Aufgabe noch einmal von vorne zu beginnen.
  • Bei Menschen, die anfällig für Reisekrankheit oder vestibuläre Probleme sind, können einige Animationen zu Übelkeit oder Schwindelgefühlen führen.

Was macht ein "schlechtes" Animationserlebnis aus?

Jeder wird auf eine Animation anders oder vielleicht überhaupt nicht reagieren. Für diejenigen, die eine negative Reaktion erfahren, wie vermeiden wir es, eine solche Erfahrung zu machen?

Hier sind einige Punkte, die Sie beim Erstellen von Animationen beachten sollten:

  • Größe der Bewegung . Hilfreich sind kleine oder kompakte Animationen, wie ein Ladekreisel. Wenn sich jedoch etwas von einer Seite des Bildschirms zur anderen bewegt, insbesondere kritische Inhalte, kann dies problematisch sein. Halten Sie Animationen klein und zweckmäßig.
  • Richtung und Geschwindigkeit . Parallaxeneffekte und Scroll-Jacking, die dazu führen, dass sich Vorder- und Hintergrundelemente mit unterschiedlichen Geschwindigkeiten bewegen oder Objekte sich in andere Richtungen als erwartet bewegen, können Probleme verursachen. Ermöglichen Sie dem Benutzer, in seinem eigenen Tempo zu scrollen.
  • Entfernung . Denn scheinbar raumgreifende Animationen, die allerdings nur die Größe eines Computerbildschirms haben, können mitunter ein negatives Erlebnis auslösen. Auch hier ist es am besten, Animationen klein und kompakt zu halten, um eine negative Benutzererfahrung zu vermeiden. Verzichten Sie darauf, lange Inhalte zu animieren.
  • Blinken . Vermeiden Sie Stroboskop- oder Flash-Inhalte, die für jeden schädlich sein können, der anfällig für Krampfanfälle ist. Wenn ein solcher Inhalt erforderlich ist, verringern Sie den blinkenden Inhalt auf nicht mehr als dreimal in einem Zeitraum von einer Sekunde.

So stellen Sie barrierefreie Animationen sicher

Sehen wir uns einige Möglichkeiten an, um mithilfe von Animationen ein barrierefreies und integratives Erlebnis zu schaffen:

  • Gestalten Sie subtile Animationen . Der Einsatz von Animationen auf subtile Weise und als Mittel zur Führung des Benutzers kann sehr hilfreich sein. Versuchen Sie, Animationen zu minimieren, die die Standardgeschwindigkeit, Bewegung und Steuerung ändern, an die Benutzer gewöhnt sind. Wenn Sie beispielsweise einen Artikel in einen Einkaufswagen legen, könnte eine Animation angezeigt werden, um diese Aktivität als abgeschlossen hervorzuheben. Ein weiteres Beispiel könnte beim Senden eines dynamischen Formulars eine animierte Fehler- oder Erfolgsmeldung sein, um die Aufmerksamkeit der Benutzer auf diesen Bereich zu lenken.
  • Animationen sollten leicht verständlich und vorhersehbar sein . Im Sinne des „subtilen“ Themas sollten Animationen idealerweise so eingesetzt werden, dass die Menschen die Bedeutung hinter der Animation verstehen können. Ein Beispiel dafür; der klassische Ladespinner. Dies hilft, den Benutzer darüber zu informieren, dass Fortschritte gemacht werden und ein Hintergrundprozess ausgeführt wird. Es vermittelt im Grunde die Botschaft: "Bitte haben Sie etwas Geduld, während wir Ihre Daten verarbeiten."
  • Entwerfen Sie einen Zustand „keine Animation“ . Es ist möglich, Animationen auf Betriebssystemebene "abzuschalten". Die macOS-Einstellungen für Barrierefreiheit verfügen beispielsweise über die Option „Bewegung reduzieren“. Darüber werden wir in Kürze ausführlicher sprechen.
  • Anhalten von Animationen zulassen . Wenn auf dem Bildschirm Hintergrundvideos, Karussell-Schieberegler oder sogar animierte GIF-Bilder vorhanden sind, können Sie diese Art von Inhalten anhalten. Bauen Sie das Pause-Steuerelement in jedes Element ein, aber wenn es viele verschiedene Animationen gibt, die angehalten werden sollen, sollten Sie erwägen, ein globales Steuerelement „Alle Animationen pausieren“ zu entwerfen und zu implementieren. Ihre Benutzer, die anfällig für Reisekrankheit sind, werden es Ihnen danken.

Animation ist etwas, das unerwartet sein kann, und wenn es da ist, haben wir normalerweise nicht viel Kontrolle über das Erlebnis. Wie können wir beim Einsatz von Animationen sicherstellen, dass wir auch ein barrierefreies Erlebnis schaffen?

Die prefers-reduced-motion Medienabfrage

Ein Tool in der Entwickler-Toolbox, das wir verwenden können, ist die CSS prefers-reduced-motion . Diese Medienabfrage gibt Entwicklern die Möglichkeit, einen Zustand „keine Animation“ (oder weniger Animation, je nach Bedarf) für Benutzeroberflächen zu erstellen.

Um unseren Benutzern die Möglichkeit zu geben, Animationen zu erleben, verfügen macOS, iOS und Windows über eine Einstellung zum Entfernen von Animationen mit dem Namen „Bewegung reduzieren“. Wenn diese Einstellung in den Betriebssystemeinstellungen aktiviert ist, wird der Code in der Medienabfrage „ prefers-reduced-motion “ ausgelöst, wodurch dieser „keine Animation“-Zustand ermöglicht wird.

Sehen wir uns zunächst an, wie Sie diese Einstellung „Bewegung reduzieren“ in macOS aktivieren:

  1. Einstellungen
  2. Barrierefreiheit
  3. Anzeige
  4. Aktivieren Sie das Kontrollkästchen „Bewegung reduzieren“.

Und innerhalb von Windows 10 :

  1. Einstellungen
  2. Suchen Sie nach "Erweiterte Systemeinstellungen".
  3. Leistungseinstellungen
  4. Deaktivieren Sie das Kontrollkästchen "Steuerelemente und Elemente in Fenstern animieren".

Mit diesem Satz wird jeder Code innerhalb der Medienabfrage prefers-reduced-motion ausgeführt.

Codieren eines Zustands "keine Animation".

Wenn wir eine Animation auf einer Website entfernen oder deaktivieren möchten, können wir das CSS zu einer prefers-reduced-motio Abfrage hinzufügen.

Wenn beispielsweise für alle button ein transition festgelegt wurde, um die Eigenschaft background-color auf :hover und :focus zu animieren, könnte das CSS so aussehen:

 button { background-color: Crimson; color: White; transition: background-color 0.25s; } button:focus, button:hover { background-color: FireBrick; }

Und wenn der Endbenutzer zum Beispiel aus irgendeinem Grund nicht die .25 Sekunden warten wollte, bis der Übergang abgeschlossen ist, könnten wir einen „keine Animation“-Zustand bereitstellen, indem wir die Medienabfrage „ prefers-reduced-motion media“ verwenden:

 @media (prefers-reduced-motion) { button { transition: none; } }

Und das ist es! Durch Einfügen dieses CSS-Bits werden alle transition , die auf der button eingestellt sind, entfernt, wenn der Benutzer die Option „Bewegung reduzieren“ in seinen Betriebssystemeinstellungen ausgewählt hat.

Browserunterstützung

Zum jetzigen Zeitpunkt unterstützen Safari, Chrome und Firefox diese Medienabfrage mit anderen Browsern und hinken hinterher. Lassen Sie uns jedoch nicht davon abhalten, unseren Code zukunftssicher zu machen. Zukünftige Menschen, die diese Einstellung benötigen und sich darauf verlassen, werden es Ihnen danken.

Indem wir die prefers-reduced-motion verwenden, ermöglichen wir unseren Benutzern, alle Animationen zu entfernen, die sie möglicherweise als ablenkend oder störend empfinden. Denken Sie daran, dass der Schlüssel hier darin besteht, eine benutzerfreundliche und komfortable Benutzererfahrung zu bieten, damit die Menschen die von uns erstellten Inhalte genießen, zu ihnen zurückkehren und sie teilen können.

WCAG-Erfolgskriterien

Dies kommt auf 2.3.3 Animation von Interaktionen zurück, wo es heißt:

"Durch Interaktion ausgelöste Bewegungsanimationen können deaktiviert werden, es sei denn, die Animation ist für die Funktionalität oder die übermittelten Informationen wesentlich."

Ressourcen:

Zurück zum Blog