Técnica Scripts de cliente WCAG 2.2
SCR40Usar JavaScript para evaluar la consulta de medios prefers-reduced-motion
En resumen
Esta técnica explica cómo detectar desde JavaScript si el usuario ha activado en su sistema la preferencia de reducir el movimiento (prefers-reduced-motion) y, en ese caso, desactivar las animaciones que se disparan al interactuar con la página. Beneficia a las personas con trastornos vestibulares o sensibilidad al movimiento, a quienes las animaciones pueden causar mareos o distracción. Úsela siempre que programe animaciones con JavaScript.
Aplicabilidad
Animaciones JavaScript que provocan movimiento y que se activan mediante interacciones del usuario.
Descripción
El objetivo de esta técnica es permitir que los usuarios eviten que se muestren animaciones (incluidas las animaciones con movimiento) en las páginas web, usando JavaScript para evaluar la consulta de medios (media query) CSS prefers-reduced-motion.
Algunos usuarios sufren distracción o náuseas con el contenido animado. Por ejemplo, si al desplazar una página los elementos se mueven (más allá del movimiento esencial asociado al desplazamiento del contenido, que está bajo el control del usuario), esto puede desencadenar trastornos vestibulares.
Las consultas de medios que activan o desactivan de forma selectiva las animaciones controladas por JavaScript según las preferencias del sistema operativo o del agente de usuario permiten a los usuarios evitar esos desencadenantes.
El documento de comprensión de Animaciones desde interacciones incluye enlaces para cambiar el ajuste de «reducir el movimiento».
Ejemplos
Evaluar la consulta de medios CSS prefers-reduced-motion en JavaScript
Los usuarios pueden indicar en su sistema su preferencia sobre el movimiento en las interfaces. Esta elección puede detectarse en JavaScript evaluando la consulta de medios CSS prefers-reduced-motion. El script puede entonces decidir si activa o desactiva los efectos de animación según el resultado de la prueba de la consulta de medios.
const mediaQueryList = window.matchMedia("(prefers-reduced-motion: no-preference)");
if (mediaQueryList.matches) {
/* The user has not expressed a preference for reduced motion – run JavaScript-based animation */
}
Pruebas
Procedimiento
Para cada elemento interactivo que active una animación con movimiento como resultado de una interacción del usuario:
- Activar el ajuste de reducción del movimiento en el sistema;
- Comprobar que la animación con movimiento es esencial;
- Comprobar que la animación con movimiento se suprime.
Resultados esperados
- La comprobación n.º 2 o la n.º 3 es verdadera.
Cómo lo comprobamos en ADDAW
En las auditorías de accesibilidad de ADDAW revisamos cada criterio de conformidad siguiendo este catálogo de técnicas: comprobamos si la web aplica una técnica suficiente y documentamos cada fallo común con capturas y el código afectado, para que el equipo de desarrollo sepa exactamente qué corregir. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.
Fuente y licencia
Traducción al español, no oficial, realizada por ADDAW a partir de la técnica SCR40 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.
