2.3.3 Animación a partir de interacciones
Criterio de éxito oficial
La animación de movimiento activada por la interacción se puede desactivar, a menos que la animación sea esencial para la funcionalidad o la información que se transmite.
Impacto grave
El impacto de la animación en personas con trastornos vestibulares puede ser bastante grave. Las reacciones incluyen náuseas, migrañas y la posible necesidad de reposo en cama para recuperarse.
¿Qué es?
Si una animación no es esencial para comprender el contenido o el funcionamiento de algo, el usuario debe poder desactivarla. Las animaciones que se activan al hacer clic, desplazarse o pasar el cursor pueden causar mareos o náuseas en personas sensibles al movimiento.
Entre los efectos de movimiento problemáticos se incluyen:
Comparación: 2.2.2 vs 2.3.3
Ambos criterios tratan sobre el movimiento, pero se diferencian en quién inicia la animación:
¿Por qué es importante?
Algunas personas padecen trastornos vestibulares: los efectos de movimiento pueden causarles malestar real, desde mareos y migrañas hasta náuseas y la necesidad de acostarse a descansar.
¡Deja de moverte tanto! Me mareas tanto que no puedo concentrarme. Ahora tengo que apagar la computadora y acostarme.— Persona con trastorno vestibular
Los elementos se deslizan desde la izquierda
Los elementos aparecen directamente
¿Quién se ve afectado?
Personas con trastornos vestibulares: Pueden sentirse mareadas, con náuseas o desorientadas cuando se exponen a efectos de movimiento provocados por el desplazamiento, el clic o el hover.
Personas propensas a migrañas: Pueden experimentar dolores de cabeza o náuseas si los efectos del movimiento son demasiado intensos o inesperados.
Personas que se distraen fácilmente: Tienen dificultades para concentrarse cuando las animaciones siguen desviando su atención del contenido principal.
Cómo implementar 2.3.3
Respetar prefers-reduced-motion
Usa la media query CSS para comprobar si el usuario ha solicitado menos animación en las preferencias de accesibilidad de su sistema operativo («Reducir movimiento» o «Eliminar animaciones»):
/* Desactivar animaciones cuando el usuario lo solicita */
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}JavaScript y movimiento
Para animaciones basadas en JavaScript, añade una comprobación:
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
// El usuario prefiere movimiento reducido — evitar animación
} else {
// Seguro para ejecutar animación
}Control manual en el sitio
No todos los sistemas están configurados para reducir el movimiento. Ofrece un control manual — como un interruptor en el menú o en un panel de accesibilidad — para que el usuario pueda desactivar las animaciones directamente en el sitio.
¿Es esencial la animación?
Antes de añadir una animación, pregúntate: ¿esta animación ayuda al usuario a comprender qué está pasando? Si la respuesta es no, debe ser opcional o eliminarse.
¿Debo mantener esta animación?
No
Sí
Sí
No
Ejemplos prácticos
Correcto Sitio que respeta prefers-reduced-motion
Un sitio web con efectos de paralaje y transiciones de página detecta la preferencia del sistema con prefers-reduced-motion: reduce. Si está activa, todos los efectos de movimiento se desactivan automáticamente. Los usuarios que necesitan entornos tranquilos pueden navegar sin animaciones.
Correcto Panel de accesibilidad con control de movimiento
Un portal educativo incluye un botón «Eliminar animaciones» en el encabezado. Al activarlo, todos los efectos de deslizamiento, transición y paralaje se desactivan globalmente. La preferencia se guarda en localStorage para las visitas futuras.
Fallo Paralaje que no respeta la configuración del sistema
Un portafolio creativo tiene efectos de paralaje intensos al desplazarse. El sitio no implementa prefers-reduced-motion ni ofrece ningún control para desactivar los efectos. Un usuario con trastorno vestibular no puede leer el contenido sin sentirse mareado.
Esencial Animación de instrucciones de juego
Un juego de coordinación visual necesita mostrar cómo moverse el personaje. Esta animación es esencial para comprender la mecánica del juego, por lo que no necesita poder desactivarse según este criterio.
Técnicas recomendadas
| Código | Técnica | Tipo |
|---|---|---|
| C39 | Uso de la media query CSS prefers-reduced-motion | Suficiente |
| GXXX | Permitir a los usuarios desactivar las animaciones no esenciales de la interfaz de usuario | Suficiente |
Errores comunes
- No implementar la media query
prefers-reduced-motionen animaciones CSS. - Implementar
prefers-reduced-motionen CSS pero no en animaciones JavaScript. - Ofrecer el control de movimiento en un lugar difícil de encontrar o inaccesible por teclado.
- Considerar una animación como «esencial» cuando simplemente es decorativa (zoom de entrada, efecto de bounce).
- No guardar la preferencia del usuario entre sesiones.