WCAG 2.3.3: Animación a partir de interacciones

Qué significa esta regla

WCAG 2.3.3 — Animación a partir de interacciones es un criterio de nivel AAA bajo el principio de Operable. Exige que cualquier animación de movimiento activada por la interacción pueda ser deshabilitada por la persona usuaria, a menos que esa animación sea esencial para la funcionalidad o la información que se transmite. El criterio se aplica a las animaciones iniciadas por acciones de la persona usuaria como hacer clic, desplazarse, pasar el cursor por encima, enfocar o cualquier otra forma de interacción, y no a las animaciones que se reproducen automáticamente al cargar la página (que pueden estar reguladas por otros criterios como 2.2.2 Pausar, Detener, Ocultar).

El concepto clave aquí es la animación de movimiento. Esto incluye efectos de desplazamiento parallax, animaciones de transición de página, deslizamiento o zoom de elementos, indicadores giratorios y cualquier otro movimiento que se produzca como consecuencia directa de la acción de la persona usuaria. No abarca desvanecimientos simples de opacidad o cambios de color, porque estos no implican movimiento espacial que pueda desencadenar respuestas vestibulares. La distinción es entre movimiento a través del espacio (que puede causar daño) y cambios de apariencia sin desplazamiento espacial (que generalmente no lo causan).

Para aprobar se requiere que las personas usuarias tengan un mecanismo fiable para desactivar dichas animaciones sin perder acceso al mismo contenido o funcionalidad. La técnica más ampliamente aceptada es respetar la media query de nivel de sistema operativo prefers-reduced-motion, que refleja la preferencia del sistema de la persona usuaria de reducir el movimiento. Alternativamente, un conmutador a nivel de sitio colocado de forma destacada en la interfaz —como en un panel de configuración o un widget de accesibilidad— puede satisfacer el criterio, siempre que persista entre sesiones y sea fácil de encontrar.

La excepción de lo esencial es limitada: una animación es esencial solo si eliminarla cambiaría fundamentalmente la información o la funcionalidad, y no existe ninguna alternativa equivalente no animada. Un indicador de carga giratorio que sea la única señal visual de que se está recuperando contenido podría calificar; una imagen de fondo decorativa con efecto parallax que se mueve mientras la persona usuaria se desplaza no califica, incluso si es estéticamente central para el diseño.

El criterio no exige que las animaciones se eliminen por completo, solo que exista un mecanismo para desactivarlas. Cuando se activa el mecanismo, el contenido debe seguir siendo totalmente accesible, lo que significa que una alternativa no animada debe proporcionar la misma información o lograr la misma función.

Por qué es importante

Los trastornos vestibulares —afecciones que afectan al oído interno y al cerebro, que controlan el equilibrio y el movimiento ocular— afectan a una parte considerable de la población mundial. Según la Vestibular Disorders Association, aproximadamente el 35% de las personas adultas de 40 años o más en Estados Unidos han experimentado alguna forma de disfunción vestibular. A nivel mundial, afecciones como el vértigo posicional paroxístico benigno (BPPV), la enfermedad de Ménière y las migrañas vestibulares afectan a decenas de millones de personas. Para estas personas, el movimiento en una pantalla puede desencadenar síntomas físicos inmediatos, como mareos, vértigo, náuseas, dolores de cabeza y, en casos graves, incapacidad temporal.

Considere a una persona usuaria con migraña vestibular que visita un sitio web de reserva de viajes. El sitio utiliza un efecto de desplazamiento parallax a pantalla completa en el que la imagen principal se mueve a una velocidad diferente a la del contenido de la página a medida que la persona usuaria se desplaza. A los pocos segundos de comenzar a desplazarse, la persona experimenta mareos intensos y náuseas. No puede completar la reserva y debe abandonar el sitio por completo, no por una barrera cognitiva o una discapacidad motora, sino por una reacción física al movimiento en la pantalla. Este es el daño en el mundo real que WCAG 2.3.3 está diseñado para prevenir.

Más allá de los trastornos vestibulares, las animaciones de movimiento pueden afectar negativamente a personas usuarias con trastornos por déficit de atención, que encuentran el movimiento persistente o activado como algo distractor y difícil de ignorar, así como a personas con trastornos de ansiedad, para quienes el movimiento inesperado puede causar angustia. Las personas que se recuperan de conmociones cerebrales o lesiones cerebrales traumáticas también son muy sensibles al movimiento visual. Incluso las personas usuarias sin ningún diagnóstico pueden encontrar una animación intensa fatigante durante sesiones prolongadas.

Desde una perspectiva de usabilidad y de negocio, respetar las preferencias de reducción de movimiento se correlaciona con mejores tasas de finalización de tareas y mayor duración de las sesiones entre las personas sensibles. Respetar las preferencias a nivel de sistema también indica que un producto está bien diseñado y es atento a las necesidades de las personas usuarias, lo que genera confianza. Para el comercio electrónico, donde el abandono del carrito debido a una mala experiencia impacta directamente en los ingresos, eliminar barreras de animación innecesarias es un beneficio comercial concreto.

Reglas relacionadas de Axe-core

WCAG 2.3.3 requiere pruebas manuales. Ninguna regla automatizada de axe-core se asigna directamente a este criterio, y esto es intencional y no un descuido. Las razones por las que las herramientas automatizadas no pueden detectar de forma fiable las infracciones son de fondo:

• Por qué la automatización no puede detectar esto: Detectar animación de movimiento requiere comprender el renderizado visual de una página a lo largo del tiempo en respuesta a la interacción de la persona usuaria. Los escáneres automatizados de accesibilidad analizan instantáneas del DOM estáticas o ligeramente renderizadas; no simulan interacciones de la persona usuaria como desplazarse o hacer clic y luego observan si las transiciones CSS o las animaciones impulsadas por JavaScript producen movimiento espacial. Incluso si un escáner pudiera detectar la presencia de propiedades de animación o transición CSS, no puede determinar si esa animación implica desplazamiento espacial (que puede desencadenar respuestas vestibulares) o un simple desvanecimiento de opacidad (que no lo hace). Además, el escáner no puede determinar si una media query prefers-reduced-motion está correctamente conectada para suprimir la animación, si existe un conmutador a nivel de sitio o si la animación es realmente esencial. Todos estos juicios requieren una persona evaluadora que pueda observar la experiencia renderizada, interactuar con la página y evaluar el resultado.
• A qué debe apuntar la inspección manual: Las personas evaluadoras deben identificar todas las propiedades CSS que crean movimiento espacial —incluyendo transform: translateX/Y/Z, transform: scale, transform: rotate, transiciones de top/left/margin, fotogramas clave de animation que mueven elementos a través del espacio— y verificar que cada una esté condicionada por una media query prefers-reduced-motion: reduce o un conmutador controlado por la persona usuaria. Las animaciones impulsadas por JavaScript que usan bibliotecas como GSAP, Framer Motion o bucles personalizados de requestAnimationFrame deben revisarse con el mismo rigor.

Cómo hacer las pruebas

1. Activar la reducción de movimiento a nivel de sistema operativo: En macOS, vaya a Configuración del sistema > Accesibilidad > Pantalla y active "Reducir movimiento". En Windows 11, vaya a Configuración > Accesibilidad > Efectos visuales y desactive "Efectos de animación". En iOS, vaya a Configuración > Accesibilidad > Movimiento y active "Reducir movimiento". En Android, vaya a Configuración > Accesibilidad > Eliminar animaciones. Esto activa la media query prefers-reduced-motion: reduce.
2. Ejecutar un análisis automatizado como referencia: Abra axe DevTools o Lighthouse en Chrome DevTools en la página objetivo. Aunque ninguna de las herramientas marcará directamente una infracción de WCAG 2.3.3, el análisis puede mostrar problemas relacionados y confirma que el entorno de pruebas funciona. Tome nota de cualquier hallazgo relacionado con animaciones para contexto.
3. Interactuar con la página mientras la reducción de movimiento del sistema operativo está activa: Desplácese lentamente por la página, haga clic en elementos interactivos como botones, conmutadores de navegación, menús desplegables, carruseles y modales. Pase el cursor por encima de los elementos. Recorra la página con el teclado usando la tecla Tab. Observe si todavía se reproducen animaciones de movimiento espacial. Si las animaciones se suprimen, esto es un aprobado para la vía de preferencia del sistema operativo.
4. Desactivar la reducción de movimiento del sistema operativo y probar de nuevo: Con la reducción de movimiento del sistema operativo desactivada, repita todas las interacciones. Identifique cada animación de movimiento que se active a partir de la interacción de la persona usuaria. Documente cada una con una descripción de la acción que la desencadena y la animación observada.
5. Comprobar si existe un conmutador de animación a nivel de sitio: Si no se respeta la reducción de movimiento del sistema operativo, busque un control a nivel de sitio, que suele encontrarse en un widget de accesibilidad, un menú de configuración o el pie de página. Actívelo y repita todas las pruebas de interacción para confirmar que el movimiento se suprime.
6. Inspeccionar CSS y JavaScript en busca de la implementación de prefers-reduced-motion: Abra DevTools, vaya al panel Sources o Elements y busque prefers-reduced-motion en los archivos de hojas de estilo. Verifique que todas las animaciones de movimiento identificadas estén condicionadas por esta media query. En Chrome DevTools, puede emular la media query: abra la pestaña Rendering (More Tools > Rendering) y establezca "Emulate CSS media feature prefers-reduced-motion" en "reduce". Confirme que las animaciones se suprimen sin reiniciar el navegador.
7. Evaluar las excepciones esenciales: Para cada animación restante cuando la reducción de movimiento está activa, evalúe si es realmente esencial: ¿eliminarla suprime información o funcionalidad que no tiene equivalente no animado? Documente su razonamiento para cada determinación.
8. Verificación con lector de pantalla (NVDA + Firefox, JAWS + Chrome, VoiceOver + Safari): Las personas usuarias de lectores de pantalla no son inmunes a los efectos vestibulares si también tienen visión parcial. Navegue por la página usando solo el teclado mientras un lector de pantalla está activo y la reducción de movimiento del sistema operativo está habilitada. Confirme que no se desencadenan animaciones por eventos de enfoque o interacciones mediante teclado que carezcan de la adaptación de reducción de movimiento.

Cómo corregir

Efecto de desplazamiento parallax — Incorrecto

<!-- Background moves at a different rate than content on scroll -->
<style>
  .hero {
    background-image: url('hero.jpg');
    background-attachment: fixed; /* Creates parallax on scroll */
    height: 100vh;
  }
</style>
<div class='hero'></div>

Efecto de desplazamiento parallax — Correcto

<!-- Parallax is disabled when the user prefers reduced motion -->
<style>
  .hero {
    background-image: url('hero.jpg');
    background-attachment: fixed; /* Parallax by default */
    height: 100vh;
  }

  @media (prefers-reduced-motion: reduce) {
    .hero {
      background-attachment: scroll; /* Static background; no spatial movement */
    }
  }
</style>
<div class='hero'></div>

Transición CSS en elemento interactivo — Incorrecto

<!-- Button slides and scales on click with no reduced-motion accommodation -->
<style>
  .btn {
    transition: transform 0.4s ease;
  }
  .btn:active {
    transform: scale(0.9) translateY(4px);
  }
</style>
<button class='btn'>Submit</button>

Transición CSS en elemento interactivo — Correcto

<!-- Spatial transform is suppressed; a simple opacity shift conveys state without motion -->
<style>
  .btn {
    transition: transform 0.4s ease, opacity 0.2s ease;
  }
  .btn:active {
    transform: scale(0.9) translateY(4px);
  }

  @media (prefers-reduced-motion: reduce) {
    .btn {
      transition: opacity 0.2s ease; /* Only non-spatial change retained */
    }
    .btn:active {
      transform: none; /* No movement */
      opacity: 0.75;   /* State still communicated visually */
    }
  }
</style>
<button class='btn'>Submit</button>

Biblioteca de animación JavaScript (GSAP) — Incorrecto

<!-- GSAP tween fires on button click regardless of user motion preference -->
<script>
  document.querySelector('#open-modal').addEventListener('click', () => {
    gsap.fromTo('#modal', { y: 80, opacity: 0 }, { y: 0, opacity: 1, duration: 0.5 });
  });
</script>

Biblioteca de animación JavaScript (GSAP) — Correcto

<!-- Check matchMedia before triggering spatial animation; fall back to instant display -->
<script>
  const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  document.querySelector('#open-modal').addEventListener('click', () => {
    if (prefersReducedMotion) {
      /* Skip spatial movement; just make the modal visible immediately */
      gsap.set('#modal', { opacity: 1, y: 0 });
    } else {
      gsap.fromTo('#modal', { y: 80, opacity: 0 }, { y: 0, opacity: 1, duration: 0.5 });
    }
  });
</script>

Conmutador de animación a nivel de sitio (widget de accesibilidad) — Patrón correcto

<!-- Persist user preference in localStorage and apply a class to <html> -->
<button id='toggle-motion' aria-pressed='false'>Reduce Motion</button>

<style>
  /* Default: animations active */
  .card { transition: transform 0.3s ease; }
  .card:hover { transform: translateY(-8px); }

  /* When user opts out via widget */
  html.reduce-motion .card {
    transition: none;
  }
  html.reduce-motion .card:hover {
    transform: none;
  }
</style>

<script>
  const btn = document.getElementById('toggle-motion');
  const stored = localStorage.getItem('reduceMotion') === 'true';

  if (stored) {
    document.documentElement.classList.add('reduce-motion');
    btn.setAttribute('aria-pressed', 'true');
  }

  btn.addEventListener('click', () => {
    const isActive = document.documentElement.classList.toggle('reduce-motion');
    btn.setAttribute('aria-pressed', String(isActive));
    localStorage.setItem('reduceMotion', String(isActive));
  });
</script>

Errores comunes

• Aplicar prefers-reduced-motion solo a animaciones CSS pero no a transiciones CSS: Tanto la abreviatura animation como la propiedad transition pueden producir movimiento espacial. Los equipos suelen escribir una media query para animaciones con fotogramas clave y olvidan que transition: transform 0.3s en hover o focus también desencadena movimiento que debe estar condicionado.
• Usar prefers-reduced-motion: no-preference como condición de la media query en lugar de reduce: El patrón correcto envuelve los estilos de experiencia reducida en @media (prefers-reduced-motion: reduce), no al revés. Envolver los estilos de animación en @media (prefers-reduced-motion: no-preference) puede funcionar, pero es más propenso a errores y a menudo se aplica mal, dejando las animaciones activas para personas usuarias que no han establecido explícitamente una preferencia.
• Almacenar en caché el resultado de matchMedia una vez y no volver a comprobarlo: Una persona usuaria puede cambiar su preferencia del sistema operativo mientras la página está abierta. Suscríbase a matchMedia(...).addEventListener('change', handler) para que las animaciones impulsadas por JavaScript respondan a los cambios de preferencia en tiempo real sin requerir recargar la página.
• Tratar los desvanecimientos solo de opacidad como animaciones de movimiento que deben suprimirse: El criterio se dirige específicamente al movimiento espacial. Eliminar las transiciones de opacidad cuando la reducción de movimiento está activa es excesivo y degrada la usabilidad. Los desvanecimientos que no mueven elementos a través del espacio generalmente se pueden mantener.
• Colocar el conmutador de animación en un menú de configuración inaccesible y profundo: Si se utiliza un control a nivel de sitio en lugar de (o además de) la media query del sistema operativo, debe ser fácil de encontrar, idealmente en el encabezado o pie de página persistente del sitio, o en un widget superpuesto accesible, y no enterrado tres niveles dentro de una página de configuración de cuenta de usuario que requiera inicio de sesión.
• Suponer que todas las bibliotecas de animación respetan automáticamente prefers-reduced-motion: La mayoría de las bibliotecas de animación JavaScript, incluidas GSAP, Anime.js e implementaciones personalizadas de requestAnimationFrame, no respetan automáticamente la media query. Cada animación programática debe estar protegida individualmente con una comprobación de matchMedia en la capa de JavaScript.
• Declarar una animación como esencial sin justificación adecuada: Los equipos a veces marcan animaciones decorativas complejas como esenciales para evitar el trabajo de corrección. La excepción de esencial es limitada; una animación es esencial solo si la información que transmite no puede expresarse mediante ningún medio estático o no animado. Los indicadores de carga, el parallax decorativo y las transiciones de entrada de página casi nunca califican como esenciales.
• No probar interacciones más allá del clic, especialmente desplazamiento y hover: Los efectos de desplazamiento parallax y las transformaciones activadas por hover se encuentran entre los infractores vestibulares más comunes, pero las pruebas suelen limitarse a interacciones de clic. Las pruebas exhaustivas deben abarcar todas las modalidades de interacción, incluyendo desplazamiento, hover, enfoque, arrastre y navegación mediante teclado.
• No persistir la preferencia del conmutador a nivel de sitio entre sesiones: Si una persona usuaria configura un conmutador del sitio para reducir el movimiento y luego navega a otra página o regresa al sitio al día siguiente y la configuración se restablece, la adaptación ha fallado en la práctica. Las preferencias deben almacenarse en localStorage o en un perfil de usuario y aplicarse de nuevo en cada carga de página.
• Olvidar los contenidos y widgets de terceros: Los feeds sociales incrustados, widgets de chat, mapas incrustados y scripts publicitarios pueden introducir sus propias animaciones de movimiento completamente fuera del control del CSS del sitio anfitrión. El contenido de terceros debe auditarse y se debe instar a los proveedores a ofrecer compatibilidad con reducción de movimiento, o las incrustaciones deben envolverse en contenedores que supriman el movimiento mediante estrategias de contención CSS cuando sea posible.

Relación con la normativa de accesibilidad de Turquía

La Circular Presidencial 2025/10 de Turquía, publicada en el Boletín Oficial (Resmî Gazete) n.º 32933 el 21 de junio de 2025, establece obligaciones vinculantes de accesibilidad digital para un conjunto definido de tipos de entidades que operan en Turquía. Las entidades cubiertas incluyen instituciones y organismos públicos, plataformas de comercio electrónico, bancos y proveedores de servicios financieros, hospitales y centros de salud privados, operadores de telecomunicaciones con 200,000 o más suscriptores, agencias de viajes autorizadas, empresas de transporte privado y escuelas privadas autorizadas por el Ministerio de Educación Nacional (MoNE).

La Circular exige la conformidad con WCAG 2.1 en nivel AA como estándar de referencia para los servicios digitales producidos o sustancialmente actualizados después de la fecha de entrada en vigor. WCAG 2.3.3 — Animación a partir de interacciones es un criterio de nivel AAA y, por lo tanto, no es un requisito obligatorio en virtud de la Circular Presidencial 2025/10. Las entidades cubiertas no están legalmente obligadas a implementar este criterio para lograr el estado de conformidad según la legislación turca.

Sin embargo, lograr la conformidad de nivel AAA en criterios como 2.3.3 conlleva un valor práctico y reputacional significativo para las organizaciones turcas. Las afecciones de sensibilidad vestibular y al movimiento son discapacidades invisibles que se pasan por alto con frecuencia en auditorías de accesibilidad centradas de forma estrecha en la compatibilidad con lectores de pantalla. Para sectores como el sanitario (hospitales y plataformas de salud privadas), donde las personas usuarias pueden incluir pacientes con afecciones neurológicas que aumentan la sensibilidad al movimiento, y para el comercio electrónico y las agencias de viajes, donde son comunes los patrones de interfaz de usuario con desplazamiento intensivo y animaciones, implementar 2.3.3 demuestra un enfoque maduro y centrado en la persona usuaria hacia la accesibilidad.

Las organizaciones que busquen la conformidad AAA voluntaria, como aquellas que persiguen ventajas en licitaciones públicas, entrada en mercados internacionales o certificaciones sectoriales, deberían tratar 2.3.3 como un criterio prioritario dado el coste de corrección relativamente bajo (una estrategia bien estructurada de media query prefers-reduced-motion puede aplicarse de forma sistemática en todo un sistema de diseño) y el daño físico directo que puede causar su ausencia. Incluir un control de animación dentro de un widget de superposición de accesibilidad, como Accsible, permite a las organizaciones turcas ofrecer esta adaptación sin exigir que las personas usuarias localicen la configuración de su sistema operativo, haciendo que la vía para reducir el movimiento sea detectable y utilizable para el público más amplio posible.