Revireter les préfères réduits en mouvement

Il y a deux ans, j'ai exploré prefers-reduced-motion , une requête médiatique introduite dans Safari 10.1 pour améliorer l'accessibilité Web pour les utilisateurs souffrant de troubles vestibulaires et d'épilepsie. L'article original a discuté des antécédents, de la nécessité et de la mise en œuvre de la requête pour empêcher les problèmes induits par le mouvement.

Cela a suivi l'excellent travail d'Orde Saunders sur les requêtes utilisateur et les idées de Val Head sur la sensibilité au mouvement dans l'animation Web.

Avance rapide jusqu'en 2019, et les principaux navigateurs de bureau prennent désormais en charge cette fonctionnalité cruciale! Safari a ouvert la voie, suivi de près par Firefox. Chrome a rejoint plus tard, avec le support à partir de la version 74.

Les détails de la prise en charge du navigateur sont disponibles sur caniuse.com (un nombre indique le support à partir de cette version).

Prise en charge du navigateur de bureau

Navigateur	Soutien
Chrome	Oui
Incendier	Oui
C'est-à-dire	Non
Bord	Non (mais devenant à base de chrome)
Safari	Oui

Prise en charge du navigateur mobile / tablette

Navigateur	Soutien
Android Chrome	Oui
Android Firefox	Oui
Android (autre)	Partiel
Safari iOS	Oui

Alors que Microsoft Edge manque actuellement de support, son intégration avec Chrome est imminente. Cette transition offre un potentiel à la hausse: les fortes fonctionnalités d'accessibilité d'Edge pourraient être incorporées dans Chrome.

Sensibilisation

Alors que certains sites Web et applications utilisent prefers-reduced-motion , son adoption reste étonnamment limitée en dehors du CSS et des communautés d'accessibilité. Ce n'est pas entièrement inattendu; Les fonctionnalités CSS sont souvent sous-évaluées et l'accessibilité encore plus.

Il est compréhensible que les développeurs ne négligent pas une fonctionnalité relativement nouvelle, en particulier dans une industrie au rythme rapide. Les priorités du marché influencent fortement la mise au point des développeurs. Cependant, prefers-reduced-motion est-il agnostique et s'intègre aux paramètres au niveau OS, ce qui suggère une pertinence à long terme.

Sa véritable valeur ne réside pas dans l'impressivité des recruteurs mais dans l'amélioration de la vie des utilisateurs affectés. Cette question médiatique simple peut empêcher une gêne importante pour les utilisateurs de parcourir ou d'interagir avec un site Web.

Impact sur les utilisateurs touchés

Le handicap est complexe et multiforme, englobant un large éventail de facteurs permanents, temporaires, environnementaux et situationnels. Beaucoup de gens se concentrent à tort uniquement sur les déficiences visuelles. L'impact des handicaps varie considérablement et ce qui aide une personne pourrait nuire à une autre.

Pour les personnes atteintes de troubles vestibulaires, de migraines ou de déclencheurs de crise, la navigation Web peut être difficile. Des animations inattendues peuvent déclencher des symptômes débilitants. Ceci est particulièrement problématique pour ceux dont le travail dépend fortement des applications Web. Ils peuvent manquer de contrôle sur leurs appareils de travail ou leurs options d'emploi.

C'est une idée fausse que tout le monde est conscient de son état ou de ses déclencheurs. L'événement de déclenchement initial peut parfois augmenter la sensibilité. L'article de Facundo Corradini, «Accessibilité pour les troubles vestibulaires», décrit avec éloquence cette expérience.

De plus, tous les utilisateurs de technologies d'assistance ne sont pas avertis en technologie. Ils peuvent ne pas être conscients des paramètres du système d'exploitation ou des extensions de navigateur qui atténuent le mouvement. Considérez les utilisateurs avec des appareils d'entreprise verrouillés, ceux qui ne connaissent pas les capacités de leur appareil ou ceux qui utilisent des appareils peu coûteux ou plus anciens qui manquent de prise en charge de prefers-reduced-motion .

Évaluation du préjudice potentiel

L'animation destinée à encourager l'engagement peut à l'inverse éloigner les utilisateurs. Bien que difficile à quantifier, cet impact négatif est réel. Les préjudices intentionnels sont plus faciles à mesurer, bien que la résoudre ce qu'il fasse présente d'autres défis.

Des dommages importants à une base d'utilisateurs substantielle affectent l'image de marque. L'animation excessive ou mal implémentée peut dissuader les utilisateurs, même s'ils ne peuvent pas articuler la raison.

Nous ne pouvons pas et ne devons pas connaître les circonstances spécifiques de chaque utilisateur. Une approche proactive et prévenante est essentielle.

L'animation comme amélioration progressive

Tous les appareils ne rendent pas l'animation aussi bien. Les appareils à faible puissance peuvent lutter et les modes de navigation spécialisés (comme le mode lecteur) peuvent modifier ou supprimer entièrement l'animation. Cela souligne l'importance d'une conception robuste.

L'animation peut ne pas toujours se comporter comme prévu dans les fenêtres zoomées ou le mode Reader. Des éléments importants pourraient être poussés hors de vue, résultant en une expérience visuelle discordante.

Mise en œuvre pratique

Pour améliorer la sensibilisation et la considération pour les inconvénients potentiels de l'animation, nous pouvons intégrer de manière proactive une requête multimédia pour désactiver l'animation pour les utilisateurs qui le préfèrent ou ont des appareils qui ne peuvent pas le gérer en douceur. Cela cible à la fois prefers-reduced-motion avec des taux de rafraîchissement à écran lent à l'aide de la fonction Media update .

Écran @media et
  (Préfère-réduction de mouvement: réduire),
  (Mise à jour: lent) {
  * {
    Durée d'animation: 0,001 ms! IMPORTANT;
    Count d'atelier d'animation: 1! IMPORTANT;
    Durée de transition: 0,001 ms! IMPORTANT;
  }
}

Cela oblige toutes les animations à terminer imperceptiblement. Il fonctionne pour les utilisateurs demandant un mouvement ou des appareils réduits avec des taux de rafraîchissement lents (par exemple, les écrans E-INK). Le maintien animation-duration et transition-duration garantit la fonctionnalité tout en empêchant les problèmes.

Cette approche vise à:

1. Augmentez la sensibilisation aux fonctionnalités des médias.
2. Encouragez une considération réfléchie de l'impact de l'animation.
3. Promouvoir des feuilles de styles plus maintenables.

Valeur de l'animation

Au-delà des troubles vestibulaires et de la photosensibilité, les handicaps cognitifs doivent être pris en compte. L'Organisation mondiale de la santé estime que 300 millions de personnes dans le monde sont touchées par la dépression, ce qui peut nuire à l'interaction avec l'environnement.

L'animation peut être bénéfique pour certains handicaps cognitifs, aidant la compréhension et la communication. Les travaux de Val Head mettent en évidence son potentiel pour améliorer la résolution de problèmes, le rappel et l'acquisition des compétences tout en réduisant la charge cognitive.

Réduisez, ne supprimez pas

Nous ne devons pas éliminer complètement l'animation. prefers-reduced-motion suggère une réduction, pas une élimination. En utilisant la cascade CSS, nous pouvons gérer l'animation sur une base par composante. Si l'animation est cruciale à la compréhension, nous pouvons le ralentir pour éviter de déclencher des problèmes.

Les propriétés personnalisées CSS peuvent rationaliser ce processus, permettant même un widget de préférence d'animation à l'échelle du site.

/ * Durations par défaut * /
:racine {
  - Durée de l'animation: 250 ms;
  - Durée de transition: 250 ms;
}

/ * Shortening contextuel * /
@Media (préfert-réduction du mouvement: réduire), (mise à jour: lent) {
  :racine {
    - Durée de l'animation: 0,001 ms! IMPORTANT;
    - Durée de transition: 0,001 ms! IMPORTANT;
  }
}

@Media (préfert-réduction du mouvement: réduire), (mise à jour: lent) {
  * {
    Durée d'animation: var (- Durée d'animation);
    Count d'atelier d'animation: 1! IMPORTANT;
    Durée de transition: var (- durée d'animation);
  }
}

/ * Mettez à jour la durée de l'animation critique * /
@Media (préfère la mouvement réduit: réduire), (mise à jour: rapide) {
  .C-éducation-concept {
    - Durée de l'animation: 6000 ms! IMPORTANT;
    nom d'animation: concept éducatif;
    Durée d'animation: var (- Durée d'animation);
  }
}

Le test de l'animation ralenti nécessite la contribution des utilisateurs sensibles aux problèmes liés au mouvement. Une meilleure approche consiste à recueillir des informations sur les déclencheurs passés et à les comparer à l'animation implémentée.

Neurodivergence

Shell Little, un spécialiste de l'accessibilité, fournit des informations précieuses sur la neurodivergence:

L'animation Web peut être bénéfique pour certains utilisateurs de neurodivergents, mais la même animation peut être un obstacle pour d'autres. La ligne directrice de la pause, de l'arrêt, de la cachette de WCAG est limitée, ne s'appliquant qu'aux animations de plus de 5 secondes et exemptant un mouvement essentiel. prefers-reduced-motion propose une solution contrôlée par l'utilisateur, ce qui permet aux individus de décider quand et où l'animation est affichée. Ceci est particulièrement crucial pour les utilisateurs ayant des handicaps liés à l'attention ou des sensibilités de traitement sensoriel. Le contenu de lecture automatique est une frustration courante et prefers-reduced-motion pourrait en résoudre.

Conclusion

L'animation doit être utilisée de manière responsable. Les facteurs à considérer comprennent: la sensibilisation aux problèmes potentiels, l'atténuation des risques juridiques, l'amélioration de l'expérience utilisateur, la compréhension des capacités et des limites des appareils et le respect des données des utilisateurs et de la durée de vie de la batterie.

La propagation de la conscience des pratiques d' prefers-reduced-motion et des pratiques d'animation responsables est cruciale. Le partage d'expériences d'animations problématiques peut aider à créer une référence précieuse pour les développeurs. Cet effort collectif peut rendre le Web plus inclusif et accessible pour tout le monde.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!