Eine Einführung in die Reduced Motion Media Query

Der Erfolg des offenen Webs basiert auf interoperablen Technologien. Die Möglichkeit, Animationen zu steuern, existiert nun neben wichtigen Funktionen wie dem Zoomen von Inhalten, dem Installieren von Erweiterungen, dem Aktivieren der Anzeige mit hohem Kontrast, dem Laden benutzerdefinierter Stylesheets oder dem Deaktivieren von JavaScript.

Seiten überfluten ihre Zielgruppen nur allzu oft mit automatisch abspielenden, Akku-entleerenden und ressourcenfressenden Animationen. Die Notwendigkeit, dass Menschen die Kontrolle über Animationen zurückgewinnen können, ist vielleicht weiter verbreitet, als Sie zunächst denken.

Eine kurze Geschichte der reduzierten Bewegung

Bei seiner Veröffentlichung im Jahr 2013 enthielt iOS 7 eine dramatische Überarbeitung der visuellen Darstellung des Betriebssystems. Zu den Änderungen gehörten Transluzenz und Unschärfe, eine vereinfachte "flache" Benutzeroberfläche und dramatische Bewegungseffekte wie Vollbild-Zoom und -Schwenken.

Während das neue Aussehen weitgehend akzeptiert wurde, berichteten einige Nutzer des aktualisierten Betriebssystems von Reisekrankheit und Schwindel. Die Benutzeroberflächenbewegungen stimmten nicht mit dem Gefühl der Bewegung oder der räumlichen Orientierung der Nutzer überein und lösten die berichteten Effekte aus.

Obwohl Technologie, die unbeabsichtigt nachteilige Auswirkungen hat, bereits zuvor existierte, verlieh die Popularität von iOS dem Problem eine besondere Bedeutung. Apple bietet eine großartige Unterstützung für Barrierefreiheit, sodass als Reaktion darauf eine Option in den Betriebssystemeinstellungen hinzugefügt wurde, um Animationseffekte für Menschen mit vestibulären Störungen zu deaktivieren.

Vestibu-was?

Ihr Gleichgewichtssystem (vestibuläres System) bietet einen internen Sensor, der die physische Position und Ausrichtung Ihres Körpers in der Welt kommuniziert und entscheidend für die Kontrolle des Gleichgewichts und der Augenbewegung ist.

Vestibuläre Störungen können dazu führen, dass Ihr Gleichgewichtssystem Schwierigkeiten hat, die Geschehnisse zu interpretieren, was zu Gleichgewichtsverlust und Schwindel, Migräne, Übelkeit und Hörverlust führt. Jeder, der sich zu schnell gedreht hat, kennt ein verwirrtes Gleichgewichtssystem.

Vestibuläre Störungen können sowohl durch genetische als auch durch Umweltfaktoren verursacht werden. Sie sind Teil des größeren Spektrums von Zuständen, die die Anliegen der Barrierefreiheit ausmachen, und betreffen mehr als 70 Millionen Menschen.

Pah! Mir geht’s gut! Das wird mir nie passieren

Denken Sie daran: Wir sind alle nur vorübergehend handlungsfähig. Vielleicht sind Sie mit der Erkrankung geboren. Vielleicht erkranken Sie an Fieber oder einer Ohrenentzündung. Vielleicht wird Ihnen schlecht im Auto oder auf See. Vielleicht entwickeln Sie einen Tumor. Oder vielleicht werden Sie einfach älter.

Ein wenig Schwindel mag nicht wie eine große Sache erscheinen, aber dieser Moment der Übelkeit könnte entscheidend sein: Gleichgewicht verlieren und stürzen, Migräne während eines Vorstellungsgesprächs, Übelkeit-ausgelöstes Erbrechen während der Arbeit in der Lebensmittelbranche, Ohnmachtsanfälle beim Bedienen einer Auto-Benutzeroberfläche usw.

Was können wir also dagegen tun?

Eine neue Media Query einführen

Safari 10.1 führte die Reduced Motion Media Query ein. Es handelt sich um eine Deklaration ohne Vendor-Präfix, die es Entwicklern ermöglicht, „Stile zu erstellen, die große Bewegungsbereiche für Benutzer vermeiden, die in den Systemeinstellungen eine Präferenz für reduzierte Bewegung angeben“.

Die Syntax ist ziemlich einfach

/* Applies styles when Reduced Motion is enabled */
@media screen and (prefers-reduced-motion: reduce) { }

@media screen and (prefers-reduced-motion) { }

Safari wird diesen Code analysieren und auf Ihre Website anwenden, sodass Sie eine alternative Erfahrung für Benutzer anbieten können, bei denen die Option „Reduced Motion“ aktiviert ist.

Es ist erwähnenswert, dass (prefers-reduced-motion) ohne das Schlüsselwort reduce als wahr ausgewertet wird. Ich finde es jedoch besser, in solchen Fällen explizit zu sein, insbesondere bei neueren und obskureren Funktionen.

Sie können auch das Gegenteil ansprechen

/* Applies styles when the user has made no preference known */
@media screen and (prefers-reduced-motion: no-preference) { }

Betrachten Sie diese neue Media Query wie @supports: Beschreiben Sie das anfängliche Erscheinungsbild und ändern Sie dann die Stile basierend auf der Fähigkeit.

Wie man testet

Wie können wir dieses Prachtstück also ausprobieren? Wenn Sie auf dem neuesten Stand von MacOS sind, sollten Sie es in Safari ausprobieren können.

Gehen Sie zu den Systemeinstellungen, wählen Sie die Kategorie Barrierefreiheit, wählen Sie die Registerkarte Anzeige und aktivieren Sie die Option Bewegung reduzieren. Sie werden feststellen, dass sich die Beispielanimation im folgenden CodePen-Beispiel ändert, wenn das Kontrollkästchen umgeschaltet wird: Der pulsierende Kreis wird zu einem inaktiven Quadrat.

Siehe den Pen Reduce Motion Media Query Example von Eric Bailey (@ericwbailey) auf CodePen.

Hier ist ein kurzes Video, falls Sie keinen Zugang dazu haben

Benötigen Sie ein praktischeres Beispiel dafür, wie die Media Query angewendet werden könnte?

Diese Funktion der New York Times beginnt mit einem Vollbild-Autoplay-Video, das einen Sturz aus großer Höhe simuliert.

Die Reduced Motion Media Query könnte eine alternative Erfahrung bieten, die die Sturzanimation durch einen Screenshot des letzten Frames der Animation ersetzt.

In dieser aktualisierten Erfahrung wird der Inhalt des Artikels thematisch vermittelt: Eine wunderschöne Darstellung des vorgeschlagenen Gateway-Projekts, um den Leser anzuziehen. Die anderen weniger dramatischen Animationen in der Funktion könnten unverändert bleiben, da sie sowohl subtil in ihren Übergängen sind als auch vom Leser durch bewusstes Scrollen auf der Seite aktiviert werden.

Die Wirkung der Geschichte bleibt erhalten, ohne die Person, die sie liest, potenziell zu schädigen. Das ist ein Gewinn für beide Seiten!

Hm! Klingt nach viel Arbeit

Selbst wenn Sie alle Vorteile des Erstellens barrierefreier Websites ignorieren, ist es wahrscheinlich eine gute Idee, sich mit User Queries vertraut zu machen.

Da Fähigkeiten, die traditionell vom Betriebssystem gesteuert werden, in den Browser integriert werden, wird die Gestaltung von Erlebnissen, die sich elegant an die Vorlieben einer Person anpassen, immer wichtiger werden. Die Reduzierung von Bewegungen wird wahrscheinlich bald bald von anderen Browsern als Teil einer Welle neuer User Queries unterstützt werden.

Die Meinung des Browsers muss ebenfalls berücksichtigt werden – ohne eine gestaltete Alternative erstellen die Standardeinstellungen des Browsers für reduzierte Bewegung möglicherweise keine wünschenswerte Erfahrung. Tatsächlich könnte die Animation, wenn sie allein wichtige Informationen über Ihre Website kommuniziert, verloren gehen.

Sollte ich also einfach auf Nummer sicher gehen und all meine Animationen entfernen?

Dies wäre eine drastische und nicht unbedingt sinnvolle Option. Animationen können, wenn sie mit Bedacht und Zurückhaltung eingesetzt werden, ein hervorragendes Mittel sein, um Beziehungen zwischen Teilen Ihrer Website oder Übergänge zwischen Zuständen zu vermitteln, die Aufmerksamkeit einer Person zu lenken, das Verständnis komplexer Konzepte zu vereinfachen oder einfach nur Spaß zu machen. Richtig eingesetzt, können Animationen sogar die Barrierefreiheit unterstützen, indem sie kognitive Barrierefreiheitsanliegen berücksichtigen.

Wenn Sie mehr darüber erfahren möchten, welche Arten von Animationen am ehesten vestibuläre Probleme auslösen, hat Val Head einen ausgezeichneten Beitrag auf A List Apart zu diesem Thema verfasst.