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

Support für Mobilfunk/Tablet -Browser

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!