Las animaciones deberían respetar el ajuste de movimiento reducido
Los efectos grandes de movimiento, zoom o parallax pueden provocar mareos o náuseas a las personas con trastornos vestibulares. Por eso activan «Reducir movimiento» en los ajustes de su dispositivo, y una tienda que ignora ese ajuste puede ahuyentarlas.
- ID de la regla
- vs-motion
- Origen
- Comprobación de Validiscan
- Impacto
- Menor
- Nivel de corrección
- AUTO
- en Shopify, Shopware, WooCommerce y Magento
- Estado
- se ejecuta
Qué hace la comprobación
Detecta animaciones CSS y de script, efectos de parallax y de zoom que ignoran el ajuste de usuario prefers-reduced-motion. Se notifica como buena práctica (relacionada con el criterio 2.3.3 Animación desde las interacciones, nivel AAA); el contenido que destella está cubierto por la lista de comprobación manual (2.3.1).
Las páginas se cargan sin ninguna preferencia de movimiento. La comprobación lee las propiedades calculadas de animación y de transición de hasta 5000 elementos del body e ignora los ocultos. Son candidatas las animaciones CSS en marcha que se repiten indefinidamente o que tienen una animation-duration superior a 5 segundos, y las transiciones de más de 5 segundos.
La página se cambia a prefers-reduced-motion: reduce, los scripts disponen de 150 ms para reaccionar y se vuelve a leer cada candidata. Una candidata que se elimina, se pausa, se oculta o pasa a ser finita y de 5 segundos o menos supera la comprobación, incluso a través de una hoja de estilos de otro origen. Las demás se convierten en hallazgos, con un máximo de 20 por página. Si el cambio falla, una consulta prefers-reduced-motion en una hoja de estilos que defina o aplique la animación cuenta como salvaguarda.
Un video de reproducción automática pasa a «pendiente de revisión», salvo que el ajuste lo oculte o lo pause mientras se reproduce. También pasa a «pendiente de revisión» un único recordatorio para comprobar a mano los destellos, si la página muestra vídeo, canvas, imágenes .gif o animación. Hoy el escáner no convierte lo que está pendiente de revisión en hallazgos. No se mide el movimiento que un script controla fotograma a fotograma.
Cómo corregirlo
Envuelva las animaciones y transiciones no esenciales en @media (prefers-reduced-motion: no-preference), o desactívelas dentro de @media (prefers-reduced-motion: reduce), y compruebe el ajuste en JavaScript antes de iniciar animaciones.
Criterios de conformidad de las WCAG
Buena práctica: no está vinculada a ningún criterio de conformidad de las WCAG.
Dónde lo corrige una receta
Shopify: receta reduced-motion-guard
Mostrar el antes y el después (1)
assets/base.css.liquid Cambios en assets/base.css.liquid (líneas añadidas: 13; eliminadas: 0)
| Línea anterior | Línea nueva | Cambio | Código |
|---|---|---|---|
| 1866 | 1866 | } | |
| 1867 | 1867 | ||
| 1868 | 1868 | /* ----------------------------------------------------------------- motion */ | |
| 1869 | Añadida | ||
| 1870 | Añadida | /* validiscan:reduced-motion-guard */ | |
| 1871 | Añadida | @media (prefers-reduced-motion: reduce) { | |
| 1872 | Añadida | *, | |
| 1873 | Añadida | *::before, | |
| 1874 | Añadida | *::after { | |
| 1875 | Añadida | animation-duration: 0.01ms !important; | |
| 1876 | Añadida | animation-iteration-count: 1 !important; | |
| 1877 | Añadida | transition-duration: 0.01ms !important; | |
| 1878 | Añadida | scroll-behavior: auto !important; | |
| 1879 | Añadida | } | |
| 1880 | Añadida | } | |
| 1881 | Añadida | /* /validiscan:reduced-motion-guard */ |
Shopware: receta reduced-motion-guard
Mostrar el antes y el después (1)
Resources/app/storefront/src/main.js Cambios en Resources/app/storefront/src/main.js (líneas añadidas: 1; eliminadas: 1)
| Línea anterior | Línea nueva | Cambio | Código |
|---|---|---|---|
| 139 | 139 | }); | |
| 140 | 140 | }); | |
| 141 | 141 | ||
| 142 | Eliminada | if (options.autoplay === true) { | |
| 142 | Añadida | 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 Cambios en Resources/app/storefront/src/scss/base.scss (líneas añadidas: 14; eliminadas: 0)
| Línea anterior | Línea nueva | Cambio | Código |
|---|---|---|---|
| 1708 | 1708 | margin: 8px 0 0; | |
| 1709 | 1709 | font-size: 0.875rem; | |
| 1710 | 1710 | } | |
| 1711 | Añadida | ||
| 1712 | Añadida | /* validiscan:reduced-motion-guard */ | |
| 1713 | Añadida | /* Honour the visitor's reduced-motion setting: animations and transitions end at once, no smooth scrolling. */ | |
| 1714 | Añadida | @media (prefers-reduced-motion: reduce) { | |
| 1715 | Añadida | *, | |
| 1716 | Añadida | *::before, | |
| 1717 | Añadida | *::after { | |
| 1718 | Añadida | animation-duration: 0.01ms !important; | |
| 1719 | Añadida | animation-iteration-count: 1 !important; | |
| 1720 | Añadida | transition-duration: 0.01ms !important; | |
| 1721 | Añadida | scroll-behavior: auto !important; | |
| 1722 | Añadida | } | |
| 1723 | Añadida | } | |
| 1724 | Añadida | /* /validiscan:reduced-motion-guard */ |
WooCommerce: receta reduced-motion-guard
Mostrar el antes y el después (1)
assets/css/main.css Cambios en assets/css/main.css (líneas añadidas: 13; eliminadas: 0)
| Línea anterior | Línea nueva | Cambio | Código |
|---|---|---|---|
| 794 | 794 | color: #999; | |
| 795 | 795 | cursor: pointer; | |
| 796 | 796 | } | |
| 797 | Añadida | ||
| 798 | Añadida | /* validiscan:reduced-motion-guard */ | |
| 799 | Añadida | @media (prefers-reduced-motion: reduce) { | |
| 800 | Añadida | *, | |
| 801 | Añadida | *::before, | |
| 802 | Añadida | *::after { | |
| 803 | Añadida | animation-duration: 0.01ms !important; | |
| 804 | Añadida | animation-iteration-count: 1 !important; | |
| 805 | Añadida | transition-duration: 0.01ms !important; | |
| 806 | Añadida | scroll-behavior: auto !important; | |
| 807 | Añadida | } | |
| 808 | Añadida | } | |
| 809 | Añadida | /* /validiscan:reduced-motion-guard */ |
Magento: receta reduced-motion-guard
Mostrar el antes y el después (1)
app/design/frontend/Validiscan/fixture/web/css/source/_theme.less Cambios en app/design/frontend/Validiscan/fixture/web/css/source/_theme.less (líneas añadidas: 9; eliminadas: 0)
| Línea anterior | Línea nueva | Cambio | Código |
|---|---|---|---|
| 1264 | 1264 | height: 18px; | |
| 1265 | 1265 | stroke-width: 3; | |
| 1266 | 1266 | } | |
| 1267 | Añadida | ||
| 1268 | Añadida | /* validiscan:reduced-motion-guard */ | |
| 1269 | Añadida | @media (prefers-reduced-motion: reduce) { | |
| 1270 | Añadida | .product-label, | |
| 1271 | Añadida | .slick-track { | |
| 1272 | Añadida | animation: none; | |
| 1273 | Añadida | } | |
| 1274 | Añadida | } | |
| 1275 | Añadida | /* /validiscan:reduced-motion-guard */ |
app/design/frontend/Validiscan/fixture/web/css/styles-m.css Cambios en app/design/frontend/Validiscan/fixture/web/css/styles-m.css (líneas añadidas: 9; eliminadas: 0)
| Línea anterior | Línea nueva | Cambio | Código |
|---|---|---|---|
| 1232 | 1232 | height: 18px; | |
| 1233 | 1233 | stroke-width: 3; | |
| 1234 | 1234 | } | |
| 1235 | Añadida | ||
| 1236 | Añadida | /* validiscan:reduced-motion-guard */ | |
| 1237 | Añadida | @media (prefers-reduced-motion: reduce) { | |
| 1238 | Añadida | .product-label, | |
| 1239 | Añadida | .slick-track { | |
| 1240 | Añadida | animation: none; | |
| 1241 | Añadida | } | |
| 1242 | Añadida | } | |
| 1243 | Añadida | /* /validiscan:reduced-motion-guard */ |
Empiece con una revisión gratuita de su tienda.
Envíe la dirección de su tienda. Validiscan la escanea y le responde con cada fallo que el escaneo pueda demostrar, con la página y el código.
Solicitar revisión gratuitaO escriba a info@validiscan.com.
Qué cubre la revisión gratuita y qué deja fuera- Usted envía
- la dirección de su tienda
- Páginas escaneadas
- hasta 15
- Usted recibe
- todos los fallos que el escaneo puede demostrar, con la página y el código
- En su tienda
- solo páginas públicas; sin inicio de sesión, nada comprado, ningún formulario enviado
- Lo que no es
- una auditoría completa