Wiederbelebung bevorzugt es, reduzierte Motion zu machen

Vor zwei Jahren habe ich die in Safari 10.1 eingeführte prefers-reduced-motion für die Verbesserung der Web-Barrierefreiheit für Benutzer mit vestibulären Erkrankungen und Epilepsie untersucht. Der ursprüngliche Artikel erörterte den Hintergrund, die Notwendigkeit und die Implementierung der Abfrage, um bewegungsbedingte Probleme zu verhindern.

Dies folgte der hervorragenden Arbeit von Orten Saunders zu Benutzeranfragen und den Einblicke in die Bewegungsempfindlichkeit von Val Head in Webanimation.

Schneller Vorlauf bis 2019 und große Desktop -Browser unterstützen jetzt diese entscheidende Funktion! Safari leitete den Weg, dicht von Firefox. Chrome schloss sich später an, mit Unterstützung von Version 74.

Browser -Support -Details finden Sie auf caniuse.com (eine Nummer zeigt die Unterstützung aus dieser Version an).

Desktop -Browser -Unterstützung

Browser	Unterstützung
Chrom	Ja
Firefox	Ja
Dh	NEIN
Rand	Nein (aber chrombasiert werden)
Safari	Ja

Support für Mobilfunk/Tablet -Browser

Browser	Unterstützung
Android Chrome	Ja
Android Firefox	Ja
Android (andere)	Teilweise
iOS safari	Ja

Während Microsoft Edge derzeit keine Unterstützung hat, steht die Integration in Chrome unmittelbar bevor. Dieser Übergang bietet einen potenziellen Vorteil: Die starken Zugänglichkeitsfunktionen von Edge können in Chrome aufgenommen werden.

Bewusstsein schärfen

Während einige Websites und Apps prefers-reduced-motion nutzen, bleibt ihre Akzeptanz außerhalb der CSS- und Barrierefreiheitsgemeinschaften überraschend begrenzt. Dies ist nicht ganz unerwartet; CSS -Merkmale werden häufig unterbewertet und die Zugänglichkeit noch mehr.

Es ist verständlich, dass Entwickler eine relativ neue Funktion übersehen könnten, insbesondere in einer schnelllebigen Branche. Marktprioritäten beeinflussen den Entwicklungsfokus stark. prefers-reduced-motion ist jedoch Bibliotheksagnostiker und integriert sich in Einstellungen auf OS-Ebene, was auf eine langfristige Relevanz hinweist.

Der wahre Wert liegt nicht darin, Personalvermittler zu beeindrucken, sondern das Leben betroffener Benutzer zu verbessern. Diese einfache Medienabfrage kann zu erheblichen Beschwerden für Benutzer verhindern, dass Benutzer einfach mit einer Website stöbern oder interagieren.

Auswirkungen auf die betroffenen Benutzer

Behinderung ist komplex und facettenreich und umfasst eine Vielzahl von dauerhaften, vorübergehenden, ökologischen und situativen Faktoren. Viele Menschen konzentrieren sich fälschlicherweise ausschließlich auf Sehbehinderungen. Die Auswirkungen von Behinderungen variieren stark und was einer Person hilft, eine andere zu schaden.

Bei Personen mit vestibulären Erkrankungen, Migräne oder Anfallsauslöschern kann das Browsen von Webbrows eine Herausforderung sein. Unerwartete Animationen können schwächende Symptome auslösen. Dies ist besonders problematisch für diejenigen, deren Arbeit stark auf Webanwendungen abhängt. Möglicherweise fehlen ihnen die Kontrolle über ihre Arbeitsgeräte oder Arbeitsoptionen.

Es ist ein Missverständnis, dass sich jeder ihrer Erkrankung oder Auslöser bewusst ist. Das anfängliche Auslöserereignis kann manchmal die Empfindlichkeit erhöhen. Der Artikel von Facundo Corradini, "Barrierefreiheit für vestibuläre Störungen", beschreibt diese Erfahrung eloquent.

Darüber hinaus sind nicht alle assistiven Technologie-Benutzer technisch versiert. Sie können sich der OS -Einstellungen oder Browser -Erweiterungen nicht bewusst sein, die die Bewegung mindern. Betrachten Sie Benutzer mit gesperrten Unternehmensgeräten, diejenigen, die mit den Funktionen ihres Geräts nicht vertraut sind, oder diejenigen, die kostengünstige oder ältere Geräte verwenden, die keine Unterstützung für prefers-reduced-motion haben.

Bewertung potenzieller Schäden

Animation, die das Engagement fördern soll, kann umgekehrt die Benutzer wegführen. Obwohl schwer zu quantifizieren ist, ist dieser negative Einfluss real. Der vorsätzliche Schaden ist einfacher zu messen, obwohl die Bewältigung der weiteren Herausforderungen vorliegt.

Signifikanter Schaden für eine wesentliche Benutzerbasis beeinflusst das Branding. Übermäßige oder schlecht implementierte Animation kann Benutzer abhalten, auch wenn sie den Grund nicht artikulieren können.

Wir können und sollten die spezifischen Umstände jedes Benutzers nicht kennen. Ein proaktiver, rücksichtsvoller Ansatz ist unerlässlich.

Animation als progressive Verbesserung

Nicht alle Geräte machen Animationen gleich gut. Geräte mit geringer Leistung können Probleme haben, und spezielle Browsermodi (wie der Lesermodus) können die Animation vollständig verändern oder entfernen. Dies unterstreicht die Bedeutung des robusten Designs.

Animation kann sich möglicherweise nicht immer wie im vergrößerten Ansichtsfenster oder im Lesermodus verhalten. Wichtige Elemente könnten aus der Sicht gedrängt werden, was zu einer schädlichen visuellen Erfahrung führt.

Praktische Umsetzung

Um das Bewusstsein und die Berücksichtigung der potenziellen Nachteile der Animation zu stärken, können wir proaktiv eine Medienabfrage einbeziehen, um die Animation für Benutzer zu deaktivieren, die sie bevorzugen, oder Geräte haben, die sie nicht reibungslos bewältigen können. Dies zielt sowohl prefers-reduced-motion und Geräte mit langsamen Bildschirm-Aktualisierungsraten unter Verwendung der update .

 @media Bildschirm und
  (bevorzugt-reduzierte Bewegung: Reduzieren),
  (Update: langsam) {
  * {{
    Animationsdauer: 0,001 ms! Wichtig;
    Animationsverarbeitungszahl: 1! Wichtig;
    Übergangsdauer: 0,001 ms! Wichtig;
  }
}

Dies zwingt alle Animationen, unmerklich zu vervollständigen. Es funktioniert für Benutzer, die reduzierte Bewegungen oder Geräte mit langsamen Aktualisierungsraten anfordern (z. B. E-ink-Bildschirme). Die Aufrechterhaltung animation-duration und transition-duration gewährleistet die Funktionalität und verhindern gleichzeitig Probleme.

Dieser Ansatz zielt darauf ab:

1. Steigern Sie das Bewusstsein für die Medienmerkmale.
2. Fördern Sie die nachdenkliche Berücksichtigung der Wirkung der Animation.
3. Bewerben Sie mehr wartbare Stylesheets.

Wert der Animation

Über vestibuläre Störungen und Photosensitivität hinaus müssen kognitive Behinderungen berücksichtigt werden. Die Weltgesundheitsorganisation schätzt, dass weltweit 300 Millionen Menschen von Depressionen betroffen sind, was die Interaktion mit der Umwelt erheblich beeinträchtigen kann.

Animation kann für einige kognitive Behinderungen von Vorteil sein, das Verständnis und Kommunikation unterstützt. Die Arbeit von Val Head beleuchtet das Potenzial zur Verbesserung der Problemlösung, des Rückrufs und des Fertigkeits und senkt gleichzeitig die kognitive Belastung.

Reduzieren, nicht entfernen

Wir sollten die Animation nicht vollständig beseitigen. prefers-reduced-motion deutet auf eine Reduzierung hin, nicht die Entfernung. Mit der CSS-Kaskade können wir die Animation pro Komponent verwalten. Wenn die Animation für das Verständnis von entscheidender Bedeutung ist, können wir sie verlangsamen, um Probleme zu vermeiden.

CSS-benutzerdefinierte Eigenschaften können diesen Prozess optimieren und sogar ein ortsweites Animationspräferenz-Widget aktivieren.

 / * Standarddauer *//
:Wurzel {
  -Animationsdauer: 250 ms;
  -Übergangsdauer: 250 ms;
}

/ * Kontextverkürzung */
@media (bevorzugt-reduzierte Bewegung: reduzieren), (Update: Slow) {
  :Wurzel {
    -Animationsdauer: 0,001 ms! Wichtig;
    -Übergangsdauer: 0,001 ms! Wichtig;
  }
}

@media (bevorzugt-reduzierte Bewegung: reduzieren), (Update: Slow) {
  * {{
    Animationsdauer: var (-Animationsdauer);
    Animationsverarbeitungszahl: 1! Wichtig;
    Übergangsdauer: var (-Animationsdauer);
  }
}

/ * Aktualisieren Sie die Dauer für kritische Animation */
@media (bevorzugt-reduzierte Bewegung: Reduzieren), (Update: Fast) {
  .C-Educational-Konzept {
    -Animationsdauer: 6000 ms! Wichtig;
    Animationsname: Bildungskonzept;
    Animationsdauer: var (-Animationsdauer);
  }
}

Testen verlangsamte Animation erfordert Eingaben von Benutzern, die anfällig für bewegungsbezogene Probleme sind. Ein besserer Ansatz ist es, Informationen über vergangene Auslöser zu sammeln und sie mit der implementierten Animation zu vergleichen.

Neurodivergenz

Shell Little, ein Spezialist für Zugänglichkeit, bietet wertvolle Einblicke in die Neurodivergenz:

Webanimation kann für einige neurodivergierende Benutzer von Vorteil sein, aber die gleiche Animation kann für andere ein Hindernis sein. Die WCAG -Pause, der Stopp, die Richtlinie ausblenden ist begrenzt, gilt nur für Animationen, die länger als 5 Sekunden lang sind und die wesentliche Bewegung ausnehmen. prefers-reduced-motion bietet eine vom benutzergesteuerte Lösung, die Einzelpersonen ermöglicht, zu entscheiden, wann und wo Animation angezeigt wird. Dies ist besonders für Benutzer mit aufmerksamkeitsstarken Behinderungen oder sensorischen Verarbeitungsempfindlichkeiten von entscheidender Bedeutung. Autoplaying-Inhalte sind eine häufige Frustration, und es könnte sich vorziehen prefers-reduced-motion .

Abschluss

Animation sollte verantwortungsbewusst verwendet werden. Zu den zu berücksichtigenden Faktoren gehören: das Bewusstsein für potenzielle Probleme, die Minderung von rechtlichen Risiken, das Verbesserung der Benutzererfahrung, das Verständnis der Gerätefunktionen und -beschränkungen sowie die Beachtung von Benutzerdaten und Akkulaufzeit.

Die Verbreitung des Bewusstseins für prefers-reduced-motion Animationspraktiken ist entscheidend. Das Teilen von Erfahrungen mit problematischen Animationen kann dazu beitragen, eine wertvolle Referenz für Entwickler aufzubauen. Diese kollektive Anstrengung kann das Web für alle integrativer und zugänglicher machen.

Das obige ist der detaillierte Inhalt vonWiederbelebung bevorzugt es, reduzierte Motion zu machen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!