prefers-reduced-motion neu betrachtet, die Media-Query für reduzierte Bewegung

Vor zwei Jahren habe ich über prefers-reduced-motion geschrieben, eine Media Query, die in Safari 10.1 eingeführt wurde, um Menschen mit vestibulären und Epilepsie-Erkrankungen die Nutzung des Webs zu erleichtern. Der Artikel lieferte einige Hintergründe zur Media Query, warum sie benötigt wurde und wie man mit ihr arbeitet, um die Erstellung von visuellen Effekten, die Behinderungen auslösen können, zu vermeiden.

Der Artikel wurde durch die exzellente Arbeit anderer inspiriert, insbesondere durch den Beitrag von Orde Saunders über User Queries und den Artikel von Val Head über Web-Animations-Motion-Sensitivität.

Wir befinden uns jetzt vier Monate im Jahr 2019, und es freut mich, berichten zu können, dass wir die Unterstützung für diese Funktion in allen wichtigen Desktop-Browsern haben! Safari war zuerst dran, Firefox war dicht dahinter. Chrome kam etwas spät zur Party, hat sie aber ab Version 74 eingeführt.

Obwohl Microsoft Edge keine Unterstützung für prefers-reduced-motion hat, wird es bald unter der Haube zu Chrome werden. Wenn dieser Situation etwas Gutes abzugewinnen ist, dann, dass die anderen exzellenten Zugänglichkeitsfunktionen von Edge (hoffentlich) eine gute Chance haben, zurückportiert zu werden.

Bewusstsein

Obwohl ich mich freue, dass einige Websites und Webanwendungen die Media Query verwenden, stelle ich fest, dass sie selten außerhalb von Orten anzutreffen ist, die von Leuten gepflegt werden, die in den Bereichen CSS und Barrierefreiheit aktiv sind. In gewisser Weise ist das auch verständlich. Während prefers-reduced-motion relativ neu ist, werden CSS-Features und -Funktionalitäten als Ganzes oft übersehen und unterbewertet. Barrierefreiheit sogar noch mehr.

Es ist schwer, jemandem dafür die Schuld zu geben, dass er eine Funktion nicht nutzt, von der er nicht weiß, dass sie existiert, besonders wenn sie relativ neu ist und besonders in einer so schnelllebigen Branche wie unserer. Die Industrie priorisiert auch stark, was vermarktbar ist und worauf Entwickler achten. Und doch ist prefers-reduced-motion eine bibliotheksunabhängige Funktion, die an betriebssystemweite Funktionalität anknüpft. Ich bin ziemlich sicher, dass das bedeutet, dass sie eine erhebliche Verweildauer in Bezug auf den Ertrag für die investierte Zeit zur Kompetenzerwerbung haben wird.

Apropos Erträge: Ich denke, es ist auch erwähnenswert, den wahren Wert hervorzuheben, den prefers-reduced-motion darstellt: Nicht das Anwerben von buzzword-hungrigen Recruitern auf LinkedIn, sondern die Verbesserung der Lebensqualität für die Menschen, die von dem von ihr erzeugten Effekt profitieren. Die Verwendung dieser Media Query könnte jemanden davor bewahren, unnötigerweise eine enorme Menge an Schmerz zu ertragen, nur weil er die Neugier hatte, auf einen Link zu klicken oder nach unten zu scrollen.

Betroffene Personen

Wenn es um Behinderungen geht, gehen viele Leute einfach davon aus, dass es sich um "blinde Menschen" handelt. Die Realität ist, dass Behinderungen ein kompliziertes und nuanciertes Thema sind, das überraschend weit verbreitet, zutiefst persönlich und voller unglücklicher Missverständnisse ist. Es ist auch sehr variabel. Verschiedene Menschen sind von verschiedenen Behinderungszuständen auf unterschiedliche Weise betroffen – was sich auf eine breite Palette von permanenten, temporären, umweltbedingten und situativen Anliegen erstreckt. Mehrere, sich überschneidende Zustände können Einzelpersonen (und tun dies auch) beeinträchtigen, und manchmal hilft, was einer Person hilft, einer anderen schaden kann. Es ist eine schwierige, aber sehr wichtige Sache, die man im Auge behalten sollte.

Wenn Sie eine vestibuläre Störung haben oder bestimmte Arten von Migräne- oder Anfallsauslösern, kann die Navigation im Web einem Minenfeld ähneln – Sie sind immer einen Klick davon entfernt, eine unangekündigte Animation zu aktivieren. Und das gilt nur für gelegentliches Surfen.

Wenn Sie das Web beruflich nutzen, haben Sie möglicherweise keine Wahl, als eine Webanwendung zu ertragen, die mehrmals pro Woche, ja sogar täglich oder stündlich, auslösende Animationen enthält. Zusätzlich zur fehlenden Autonomie, Ihr Arbeitsgerät zu modifizieren, haben Sie möglicherweise auch nicht die Möglichkeit, schnell und einfach den Job zu wechseln – ein Privileg, das man leicht vergisst, wenn man ein spezialisierter Wissensarbeiter ist.

Es ist ein Trugschluss anzunehmen, dass eine Person sich ihrer vestibulären Störung oder ihrer Auslöser bewusst ist. Tatsächlich verschlimmert die anfängliche Auslösererfahrung manchmal Ihre Empfindlichkeit und macht andere Teile eines Designs schwer nutzbar. Facundo Corradini teilt seine Erfahrungen mit diesem Phänomen in seinem Artikel "Barrierefreiheit für vestibuläre Störungen: Wie meine temporäre Behinderung meine Perspektive verändert hat".

Nicht alle Nutzer assistiver Technologien sind Power-User, daher ist es ein weiterer Trugschluss anzunehmen, dass eine Person mit einer vestibulären Störung sich einer betriebssystemweiten Einstellung zur Bewegungsreduzierung bewusst ist oder die Zugriffsrechte hat, um diese zu aktivieren, oder eine Browsererweiterung zu installieren.

Denken Sie an jemanden, der in einem großen Unternehmen arbeitet und einen bereitgestellten Computer mit gesperrten Funktionen verwenden muss. Oder jemanden, der nicht vollständig weiß, wozu sein Tablet fähig ist, abgesehen vom Surfen in sozialen Medien, Anschauen von Videos und dem Chatten mit Familie und Freunden. Oder ein billiges und/oder unkonventionelles Gerät, das die prefers-reduced-motion-Funktion niemals unterstützen wird – manche Leute kaufen eingestellte Geräte wie das Windows Phone speziell, weil ihre Einstellung sie erschwinglich macht.

Verdienen diese Leute es, wegen ihrer Umstände verletzt zu werden? Natürlich nicht.

Betrachtung dessen, was schädlich ist

Sie können Schaden mit Wert verknüpfen, genauso wie mit Freude. Eine Animation, die dazu dient, eine Person zu einer Anmeldung zu bewegen, kann sie auch abschrecken. Diese Art von Exit-Metrik ist schwerer zu quantifizieren, aber sie passiert definitiv. Manchmal ist der Schaden sogar absichtlich und damit ein einfacher zu erfassender Datenpunkt – was Sie mit diesen Informationen tun, ist eine ganz andere Sache.

Wenn genügend Schaden bei genügend vielen Menschen auftritt, wirkt sich das auf dieses bestimmte Etwas aus, das wir als Branding kennen. Dieser Effekt muss nicht einmal an eine Behinderung gebunden sein. Zu viel Animation, auf die falschen Dinge auf die falsche Weise angewendet, wird die Leute abschrecken, selbst wenn sie nicht genau artikulieren können, *warum*.

Sie wissen auch nicht, wer die Botschaft erhält oder unter welchen Umständen er Ihre Website oder Webanwendung lädt. Wir können – und sollten – diese Art von Informationen nicht kennen. Es könnte ein potenzieller Kunde sein, der Angestellte einer Risikokapitalgesellschaft, der mit der Bewertung Ihres Start-ups beauftragt ist, oder vielleicht sogar Ihr neuer Chef.

Wir müssen auch ihre Beziehung zu uns nicht qualifizieren, um zu bestimmen, ob ihre Situation es wert ist, berücksichtigt zu werden – reicht es nicht aus, einfach proaktiv nett zu sein?

Animation ist progressive Verbesserung

Wir müssen auch anerkennen, dass nicht jedes Gerät, das auf das Web zugreifen kann, auch Animationen rendern kann oder Animationen reibungslos rendern kann. Wenn Animation auf einem Gerät mit geringer Leistung oder geringer Qualität verwendet wird, das sie "technisch" unterstützt, leidet die Gesamtnutzererfahrung. Manche Leute suchen diese Erfahrung sogar bewusst als Feature.

Geräte können auch in spezialisierten Browser-Modi eingerichtet werden, um Menschen den Zugriff auf Ihre Inhalte auf alternative Weise zu ermöglichen. Dieses Konzept ist als robust bekannt und ist eines der vier übergeordneten Prinzipien, die die Richtlinien für die Erstellung barrierefreier Erlebnisse regeln.

Animationen sehen in diesen Modi möglicherweise nicht immer so aus, wie Sie es beabsichtigt haben. Ein Beispiel wäre, wenn der Viewport gezoomt ist und die Animation nicht mit relativen Einheiten erstellt wurde. Es besteht eine nicht unerhebliche Chance, dass wichtige Teile aus dem Viewport gedrängt werden, wodurch die Animation wie eine zufällige Sammlung von flackernden Bits erscheint. Ein weiteres Beispiel für einen spezialisierten Browser-Modus könnte der Reader Mode sein, bei dem die Animation möglicherweise gar nicht erscheint.

Umsetzung in Code

Angesichts all dessen frage ich mich, ob es Möglichkeiten gibt, Web-Profis dabei zu helfen, sich der Nachteile schlecht konzipierter und implementierter Animationen bewusster zu werden und daher rücksichtsvoller damit umzugehen.

Vielleicht integrieren wir proaktiv eine Media Query weit oben in der Kaskade, um alle Animationen für diejenigen zu deaktivieren, die dies wünschen, und für diejenigen, deren Geräte sie nicht unterstützen. Dies kann durch die Auswahl von allem erreicht werden, bei dem jemand einen Wunsch nach einer geringen bis gar keiner Animationserfahrung geäußert hat, oder bei jedem Gerät, das eine langsame Bildschirmaktualisierungsrate hat.

Der erste Teil der Abfrage, der auf Animationen mit geringer bis keiner Animation abzielt, erfolgt über prefers-reduced-motion. Der zweite, der auf ein Gerät mit niedriger Bildwiederholrate abzielt, verwendet update. update ist ein neues Medienmerkmal, das es uns ermöglicht, "die Fähigkeit des Ausgabegeräts abzufragen, das Erscheinungsbild von Inhalten zu ändern, nachdem sie gerendert wurden."

@media screen and
  (prefers-reduced-motion: reduce), 
  (update: slow) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important; /* Hat tip Nick/cssremedy (https://css-tricks.de/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/#comment-1700170) */
    transition-duration: 0.001ms !important;
  }
}

Dieser Code erzwingt, dass alle Animationen, die eine Deklaration von animation-duration oder transition-duration verwenden, mit einer für das menschliche Auge nicht wahrnehmbaren Rate beendet werden. Er funktioniert, wenn eine Person eine reduzierte Bewegungserfahrung angefordert hat oder das Gerät über einen Bildschirm mit langsamer Bildwiederholrate verfügt, z. B. E-Ink oder ein billiges Smartphone.

Die Beibehaltung der Animations- und Übergangsdauer stellt auch sicher, dass alle Funktionen, die an CSS-basierte Animationen gebunden sind, erfolgreich aktiviert werden (im Gegensatz zur Verwendung einer Deklaration von animation: none), während eine Auslösung eines Behinderungszustands oder Renderverzögerungen vermieden werden.

Diese Deklaration ist mit der Absicht verfasst, absichtliche Reibung in unsere Reset-Styles einzubringen. Zugegebenermaßen ist sie keine perfekte Lösung, aber sie treibt einige Dinge voran:

1. Erhöhung der Chancen, dass Entwickler auf die beiden Medienelemente aufmerksam werden, indem sie in der Kaskade jedes inspizierten Elements präsent sind.
2. Bereitstellung eines Moments, um zu überlegen, warum und wie Animationen in eine Website oder Webanwendung eingeführt werden und wie die Erfahrung für diejenigen sein sollte, die sie nicht erleben können oder wollen.
3. Ermutigung von Entwicklern, die mit CSS weniger vertraut sind, die Kaskade in Bezug auf Komponenten zu betrachten und sie dazu zu bewegen, leichter wartbare Stylesheets zu erstellen.

Animation ist nicht unnötig

Zusätzlich zu vestibulären Störungen und photosensiblen Zuständen gibt es einen weiteren wichtigen Aspekt der Barrierefreiheit, den wir berücksichtigen müssen: kognitive Beeinträchtigungen.

Kognitive Beeinträchtigungen

Als Anliegen ist die Kategorie breit und oft schwer zu quantifizieren, aber nicht weniger wichtig als jede andere Barrierefreiheitsdisziplin. Sie ist auch weitaus verbreiteter. Um dies etwas zu erweitern: Die Weltgesundheitsorganisation berichtet, dass geschätzt 300 Millionen Menschen weltweit von Depressionen betroffen sind, einem temporären oder permanenten, umweltbedingten und/oder biologischen Zustand, der Ihre Fähigkeit zur Interaktion mit Ihrer Umgebung erheblich beeinträchtigen kann. Dazu gehört auch die Beeinträchtigung Ihrer Fähigkeit, die Welt um Sie herum zu verstehen.

Animation kann ein großartiges Werkzeug sein, um einige Formen kognitiver Beeinträchtigungen zu bekämpfen, indem sie verwendet wird, um komplexe Konzepte zu zerlegen oder die Beziehung zwischen scheinbar unterschiedlichen Objekten zu kommunizieren. Val Heads Artikel auf A List Apart hebt einige andere sehr gut recherchierte Vorteile hervor, einschließlich der Hilfe zur Verbesserung der Problemlösungsfähigkeit, des Gedächtnisses und des Lernerfolgs sowie der Reduzierung der kognitiven Belastung und Ihrer Anfälligkeit für Change Blindness.

Reduzieren bedeutet nicht unbedingt entfernen

Wir müssen beim Einsatz von Animationen möglicherweise nicht das Kind mit dem Bade ausschütten. Denken Sie daran, es heißt prefers-reduced-motion, nicht prefers-no-motion.

Wenn wir die Kaskade nutzen, können wir mit dem zuvor beschriebenen Animations-Reset-Code pro Komponente arbeiten. Wenn die Bedeutung einer Komponente durch die vollständige Entfernung ihrer Animation beeinträchtigt wird, könnten wir die Animation der Komponente verlangsamen und vereinfachen, bis das Konzept ohne potenzielle Auslöser von Barrierefreiheit kommuniziert werden kann.

Wenn Sie sich schlau fühlen, können Sie sogar CSS Custom Properties verwenden, um dies effizient zu erreichen. Wenn Sie sich *extrem* schlau fühlen, könnten Sie diese Custom Properties auch für ein seitenweites Widget für Animationseinstellungen verwenden.

Im folgenden Codebeispiel definieren wir Standardeigenschaften für unsere Animations- und Übergangsdauern und ändern sie dann basierend auf dem Kontext, in dem sie deklariert werden.

/* Set default durations */
:root {
  --animation-duration: 250ms; 
  --transition-duration: 250ms; 
}

/* Contextually shorten duration length */
@media screen and (prefers-reduced-motion: reduce), (update: slow) {
  :root {
    --animation-duration: 0.001ms !important; 
    --transition-duration: 0.001ms !important;
  }
}

@media screen and (prefers-reduced-motion: reduce), (update: slow) {
  /* Remove duration for all unknown animation when a user requests a reduced animation experience */
  * {
    animation-duration: var(--animation-duration);
    animation-iteration-count: 1 !important;
    transition-duration: var(--animation-duration);
  }
}

/* Update the duration when animation is critical to understanding and the device can support it */
@media screen and (prefers-reduced-motion: reduce), (update: fast) {
  .c-educational-concept {
    /* Set a new animation duration scoped to this component */
    --animation-duration: 6000ms !important; 
    ...
    animation-name: educational-concept;
    /* Use the scoped animation duration */
    animation-duration: var(--animation-duration); 
  }
}

Der Versuch, die Wirksamkeit dieser verlangsamten Animation zu testen, bringt uns jedoch in eine Zwickmühle: Es gibt keine echte magische Zahl, gegen die wir einen Test schreiben können.

Wir benötigen eine breite Vertretung von Personen, die anfällig für Animations-basierte Auslöser von Behinderungen sind, um sie als sicher abzeichnen zu lassen, was leider bedeutet, sie etwas auszusetzen, das potenziell nicht sicher ist. Das ist eine *riesige* Bitte.

Ein besserer Ansatz ist es, zu fragen, welche Arten von Animationen in der Vergangenheit Auslöser für sie waren, und dann zu sehen, ob das, was sie beschreiben, mit dem übereinstimmt, was wir gemacht haben. Dieser Ansatz legt auch die Verantwortung auf Sie selbst und nicht auf die Person mit einer Behinderung, die Arbeit zur Bereitstellung von Unterkünften zu leisten.

Wenn Sie Schwierigkeiten haben, Leute zu finden, fragen Sie Ihre Freunde, Familie und Kollegen – ich bin sicher, es gibt mehr Leute da draußen, als Sie denken. Und wenn Sie einen guten Ausgangspunkt für die Erstellung sichererer Animationen benötigen, fordere ich Sie noch einmal auf, Val's Artikel auf A List Apart zu lesen.

Neurodivergenz

Es gibt viel zu besprechen, und ich bin nicht die am besten qualifizierte Person, um darüber zu sprechen. Hier ist, was meine Freundin Shell Little, eine Barrierefreiheits-Spezialistin bei Wells Fargo DS4B, dazu zu sagen hat: