Les animations devraient respecter le réglage de réduction des animations
Les grands effets de mouvement, de zoom ou de parallaxe peuvent donner des vertiges ou des nausées aux personnes atteintes de troubles vestibulaires. Elles activent l’option « réduire les animations » dans les réglages de leur appareil, et une boutique qui ignore ce réglage peut les faire fuir.
- Identifiant de la règle
- vs-motion
- Source
- Contrôle Validiscan
- Impact
- Mineur
- Niveau de correction
- AUTO
- sur Shopify, Shopware, WooCommerce et Magento
- Statut
- exécutée
Ce que fait le contrôle
Détecte les animations CSS et JavaScript, les effets de parallaxe et de zoom qui ignorent le réglage utilisateur prefers-reduced-motion. Signalé comme bonne pratique (lié au critère 2.3.3 Animation résultant d’interactions, niveau AAA) ; les contenus clignotants sont couverts par la liste des vérifications manuelles (2.3.1).
Les pages se chargent sans préférence de mouvement. Le contrôle lit les propriétés calculées d’animation et de transition de 5 000 éléments au plus dans le body, en ignorant ceux qui sont masqués. Les candidats sont les animations CSS en cours qui se répètent indéfiniment ou dont la propriété animation-duration dépasse 5 secondes, ainsi que les transitions de plus de 5 secondes.
La page est basculée sur prefers-reduced-motion: reduce, les scripts disposent de 150 ms pour réagir et chaque candidat est relu. Un candidat qui est supprimé, mis en pause, masqué, ou rendu fini et d’une durée de 5 secondes au plus réussit, même lorsque le changement provient d’une feuille de style d’une autre origine. Les autres deviennent des constats, 20 au plus par page. Si le basculement échoue, une requête prefers-reduced-motion dans une feuille de style qui définit ou applique l’animation compte comme garde-fou.
Un élément video en lecture automatique va dans « à examiner », sauf si le réglage le masque ou le met en pause pendant la lecture. Un rappel unique de vérifier les flashs à la main va aussi dans « à examiner » si la page affiche une vidéo, un canvas, des images .gif ou une animation. Le scanner ne transforme pas aujourd’hui les résultats « à examiner » en constats. Le mouvement qu’un script pilote image par image n’est pas mesuré.
Comment corriger
Placez les animations et les transitions non essentielles dans @media (prefers-reduced-motion: no-preference), ou désactivez-les dans @media (prefers-reduced-motion: reduce), et vérifiez ce réglage en JavaScript avant de lancer des animations.
Critères de succès WCAG
Bonne pratique : non rattachée à un critère de succès WCAG.
Où une recette corrige le problème
Shopify : recette reduced-motion-guard
Afficher l’avant et l’après (1)
assets/base.css.liquid Modifications apportées à assets/base.css.liquid (lignes ajoutées : 13, lignes supprimées : 0)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 1866 | 1866 | } | |
| 1867 | 1867 | ||
| 1868 | 1868 | /* ----------------------------------------------------------------- motion */ | |
| 1869 | Ajoutée | ||
| 1870 | Ajoutée | /* validiscan:reduced-motion-guard */ | |
| 1871 | Ajoutée | @media (prefers-reduced-motion: reduce) { | |
| 1872 | Ajoutée | *, | |
| 1873 | Ajoutée | *::before, | |
| 1874 | Ajoutée | *::after { | |
| 1875 | Ajoutée | animation-duration: 0.01ms !important; | |
| 1876 | Ajoutée | animation-iteration-count: 1 !important; | |
| 1877 | Ajoutée | transition-duration: 0.01ms !important; | |
| 1878 | Ajoutée | scroll-behavior: auto !important; | |
| 1879 | Ajoutée | } | |
| 1880 | Ajoutée | } | |
| 1881 | Ajoutée | /* /validiscan:reduced-motion-guard */ |
Shopware : recette reduced-motion-guard
Afficher l’avant et l’après (1)
Resources/app/storefront/src/main.js Modifications apportées à Resources/app/storefront/src/main.js (lignes ajoutées : 1, lignes supprimées : 1)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 139 | 139 | }); | |
| 140 | 140 | }); | |
| 141 | 141 | ||
| 142 | Supprimée | if (options.autoplay === true) { | |
| 142 | Ajoutée | if (options.autoplay === true && !window.matchMedia('(prefers-reduced-motion: reduce)').matches) { | |
| 143 | 143 | window.setInterval( | |
| 144 | 144 | function () { | |
| 145 | 145 | show(current + 1); |
Resources/app/storefront/src/scss/base.scss Modifications apportées à Resources/app/storefront/src/scss/base.scss (lignes ajoutées : 14, lignes supprimées : 0)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 1708 | 1708 | margin: 8px 0 0; | |
| 1709 | 1709 | font-size: 0.875rem; | |
| 1710 | 1710 | } | |
| 1711 | Ajoutée | ||
| 1712 | Ajoutée | /* validiscan:reduced-motion-guard */ | |
| 1713 | Ajoutée | /* Honour the visitor's reduced-motion setting: animations and transitions end at once, no smooth scrolling. */ | |
| 1714 | Ajoutée | @media (prefers-reduced-motion: reduce) { | |
| 1715 | Ajoutée | *, | |
| 1716 | Ajoutée | *::before, | |
| 1717 | Ajoutée | *::after { | |
| 1718 | Ajoutée | animation-duration: 0.01ms !important; | |
| 1719 | Ajoutée | animation-iteration-count: 1 !important; | |
| 1720 | Ajoutée | transition-duration: 0.01ms !important; | |
| 1721 | Ajoutée | scroll-behavior: auto !important; | |
| 1722 | Ajoutée | } | |
| 1723 | Ajoutée | } | |
| 1724 | Ajoutée | /* /validiscan:reduced-motion-guard */ |
WooCommerce : recette reduced-motion-guard
Afficher l’avant et l’après (1)
assets/css/main.css Modifications apportées à assets/css/main.css (lignes ajoutées : 13, lignes supprimées : 0)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 794 | 794 | color: #999; | |
| 795 | 795 | cursor: pointer; | |
| 796 | 796 | } | |
| 797 | Ajoutée | ||
| 798 | Ajoutée | /* validiscan:reduced-motion-guard */ | |
| 799 | Ajoutée | @media (prefers-reduced-motion: reduce) { | |
| 800 | Ajoutée | *, | |
| 801 | Ajoutée | *::before, | |
| 802 | Ajoutée | *::after { | |
| 803 | Ajoutée | animation-duration: 0.01ms !important; | |
| 804 | Ajoutée | animation-iteration-count: 1 !important; | |
| 805 | Ajoutée | transition-duration: 0.01ms !important; | |
| 806 | Ajoutée | scroll-behavior: auto !important; | |
| 807 | Ajoutée | } | |
| 808 | Ajoutée | } | |
| 809 | Ajoutée | /* /validiscan:reduced-motion-guard */ |
Magento : recette reduced-motion-guard
Afficher l’avant et l’après (1)
app/design/frontend/Validiscan/fixture/web/css/source/_theme.less Modifications apportées à app/design/frontend/Validiscan/fixture/web/css/source/_theme.less (lignes ajoutées : 9, lignes supprimées : 0)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 1264 | 1264 | height: 18px; | |
| 1265 | 1265 | stroke-width: 3; | |
| 1266 | 1266 | } | |
| 1267 | Ajoutée | ||
| 1268 | Ajoutée | /* validiscan:reduced-motion-guard */ | |
| 1269 | Ajoutée | @media (prefers-reduced-motion: reduce) { | |
| 1270 | Ajoutée | .product-label, | |
| 1271 | Ajoutée | .slick-track { | |
| 1272 | Ajoutée | animation: none; | |
| 1273 | Ajoutée | } | |
| 1274 | Ajoutée | } | |
| 1275 | Ajoutée | /* /validiscan:reduced-motion-guard */ |
app/design/frontend/Validiscan/fixture/web/css/styles-m.css Modifications apportées à app/design/frontend/Validiscan/fixture/web/css/styles-m.css (lignes ajoutées : 9, lignes supprimées : 0)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 1232 | 1232 | height: 18px; | |
| 1233 | 1233 | stroke-width: 3; | |
| 1234 | 1234 | } | |
| 1235 | Ajoutée | ||
| 1236 | Ajoutée | /* validiscan:reduced-motion-guard */ | |
| 1237 | Ajoutée | @media (prefers-reduced-motion: reduce) { | |
| 1238 | Ajoutée | .product-label, | |
| 1239 | Ajoutée | .slick-track { | |
| 1240 | Ajoutée | animation: none; | |
| 1241 | Ajoutée | } | |
| 1242 | Ajoutée | } | |
| 1243 | Ajoutée | /* /validiscan:reduced-motion-guard */ |
Commencez par une vérification gratuite de votre boutique.
Envoyez l’adresse de votre boutique. Validiscan la scanne et vous envoie chaque échec que le scan peut prouver, avec sa page et son code.
Demander une vérification gratuiteOu écrivez à info@validiscan.com.
Ce que couvre la vérification gratuite, et ce qu’elle laisse de côté- Vous envoyez
- l’adresse de votre boutique
- Pages scannées
- jusqu’à 15
- Vous recevez
- chaque échec que le scan peut prouver, avec la page et le code
- Sur votre boutique
- pages publiques uniquement ; aucune connexion, aucun achat, aucun formulaire envoyé
- Ce qu’elle n’est pas
- un audit complet