Cette traduction n’a pas encore été relue par la rédaction. La version allemande fait foi. Deutsche Fassung
Accessibilité
Comment les animations s'éteignent-elles lorsqu'elles sont exploitées?
Effets parallaxes lors du défilement, éléments qui volent en cliquant, pages qui tournent lors de la commutation: Pour les personnes souffrant de troubles vestibulaires, de tels mouvements déclenchent des vertiges, des nausées et des maux de tête. Le critère 2.3.3 du niveau AAA exige que les animations déclenchées par une opération soient désactivées à moins que l'animation ne soit essentielle à la fonction ou à l'information.
Ce que le critère exige
Tout mouvement qui se produit à la suite d'une opération (scroller, cliquer, taper, glisser) peut être désactivé sans perte de la fonction. Un doux rouleau vers l'ancre devient un saut, un menu de tête apparaît immédiatement, un fond parallaxe reste immobile. Les animations essentielles sont exclues: un indicateur de progression montrant une séquence ou une simulation dont le contenu est en mouvement.
La mise en œuvre via la mise en place du système
Les systèmes d'exploitation disposent d'un réglage de "mouvement reduce", que le navigateur transmet en tant que requête média préfère-réduit-motion. Une feuille de style qui met toutes les transitions et animations à zéro sous cette requête répond au critère de tout ce qui est animé via CSS. Pour les animations JavaScript, la même requête est évaluée avant de commencer. Un commutateur séparé sur la page est un supplément pour les personnes qui ne connaissent pas le réglage du système.
C'est comme ça qu'on s'y prend
La mesure peut vérifier si la feuille de style contient une règle pour la réduction des préférences et si les animations se terminent sous elle; Si les animations JavaScript l'écoutent, un examinateur verra quand il fonctionne avec le réglage. Le critère appartient à la catégorie AAA en matière de connaissances.
Exemples
Parallaxe sans arrêt
.held { background-attachment: fixed; }
.karte { transition: transform 0.6s; }
.karte:hover { transform: translateY(-20px) rotate(2deg); }@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.held { background-attachment: scroll; }
}Le réglage du système, le mouvement Reduce, éteint tous les mouvements qui ne sont pas nécessaires à la fonction.
- Ajoutez un bloc pour préférer-réduit-motion à la feuille de style qui définit les transitions et les animations à 0,01 ms durée et défilement-comportement à auto.
- Évaluer la requête dans JavaScript (matchMedia) et démarrer parallax et effets de vol seulement si le mouvement est autorisé.
- Test avec la configuration du système: Plus rien n'est autorisé à glisser, voler ou tourner.
- Offrez un bouton visible "Déplacement off" qui enregistre le choix dans le navigateur.
