Guía completa de accesibilidad en motion y animación: diseñar “movimiento que se sienta bien y comunique bien” evitando mareos, distracción y riesgo de convulsiones (WCAG 2.1 AA)
Resumen ejecutivo (puntos clave primero)
- La animación puede enriquecer la experiencia, pero si se usa mal puede contribuir a mareos (vértigo), distracción, ansiedad o riesgo de convulsiones.
- Lo básico se resume en cinco principios: (1) solo movimiento necesario (2) corto y sutil (3) no mover sin intención del usuario (4) ofrecer formas de detener/reducir (5) respetar
prefers-reduced-motion.- Presta especial atención a parpadeos, movimientos grandes (parallax), video con reproducción automática y skeleton loaders en bucle.
- Este artículo incluye activos prácticos listos para usar: checklists de diseño, ejemplos CSS y patrones de UI (spinners, skeletons, toasts, scrolling).
Lectores objetivo (específicos): diseñadores UI/UX, ingenieros front-end, responsables de design systems, implementadores de video/anuncios, PM, QA/testers, editores
Nivel de accesibilidad: objetivo cumplimiento WCAG 2.1 AA (relacionado: 2.3.x parpadeo, 2.2.x temporización, 1.4.13 disparadores de movimiento, 2.1.x teclado, 4.1.2 mensajes de estado, etc.)
1. Introducción: el movimiento deja de ser “decoración” y se convierte en “información”
Es tentador añadir movimiento por “lo cool” o por una estética “moderna”. Pero algunas personas experimentan mareos, náuseas o dolor de cabeza cuando grandes partes de la pantalla se mueven. Otras—especialmente con ciertos perfiles cognitivos—pueden ver su atención secuestrada por el movimiento, provocando rupturas en la comprensión. Y algunas personas pueden tener convulsiones desencadenadas por luz intermitente.
En otras palabras, incluso si el movimiento se plantea como “decoración”, puede convertirse en estimulación inevitable para ciertos usuarios. Por eso, desde la accesibilidad, debes decidir con cuidado si animar o no—y si lo haces, mantenerlo sutil, breve y controlable.
Esta guía explica cómo usar movimiento diseñando a la vez una experiencia segura para todo el mundo, en términos prácticos de producto.
2. Los cinco principios clave: reglas rápidas para motion accesible
2.1 Principio 1: usa movimiento solo cuando sea necesario
El movimiento tiene significado cuando comunica cambio, por ejemplo:
- Algo se abrió/cerró (acordeón, menú)
- Algo se añadió (añadido al carrito, item agregado a una lista)
- Un estado cambió (guardado completo, error)
Pero un fondo que deriva constantemente o una imagen “hero” que hace zoom sola no son información esencial.
2.2 Principio 2: que sea corto, sutil y suave (pero no “demasiado slick”)
- Regla general: 150–250ms para transiciones pequeñas de UI
- Evita desplazamientos grandes; prefiere desvanecidos mínimos o cambios suaves de tamaño
- Evita bucles en general (la carga se acumula con el tiempo)
2.3 Principio 3: no muevas cosas sin acción del usuario
La reproducción automática y el auto-scroll aumentan carga cognitiva y ansiedad.
Si debes animar sin input del usuario, ofrece siempre un control claro de Detener o Cerrar.
2.4 Principio 4: que se pueda detener / reducir (control del usuario)
Idealmente ofrece controles guiados por el usuario como Detener, Pausar, Cerrar o Reducir movimiento.
2.5 Principio 5: respeta prefers-reduced-motion
Si alguien activó “Reducir movimiento” a nivel del sistema, ofrece una experiencia con movimiento reducido.
Es menos un “nice to have” y más un buenos modales básicos de la web moderna.
3. La zona más peligrosa: parpadeo y riesgo de convulsiones (WCAG 2.3)
3.1 El parpadeo no es solo “efectos llamativos”
Ejemplos que pueden cruzar umbrales sin querer:
- Un aviso que alterna rojo/blanco
- Una UI skeleton que pulsa con fuerza
- Un banner que cambia “como flash”
3.2 Diseño del lado seguro
- Evita el parpadeo y usa énfasis estático (bordes, iconos, negrita)
- Si necesitas llamar la atención, usa:
- Etiquetas de “Importante”
- Icono + texto
- Espaciado + encabezados
en lugar de parpadear.
4. Parallax y movimiento grande: una causa importante de mareo
4.1 ¿Por qué a algunas personas les cuesta el parallax?
Cuando el primer plano y el fondo se mueven a velocidades distintas, el desajuste entre lo visual y la sensación corporal puede sentirse como mareo. El movimiento a pantalla completa suele tener el efecto más fuerte.
4.2 Alternativas: puedes crear “profundidad” sin movimiento
- Sombras
- Bordes y espacio en blanco
- Ilustraciones estáticas
- Jerarquía tipográfica
Todo esto crea énfasis y estructura sin inducir incomodidad.
5. Implementar prefers-reduced-motion: plantilla básica de CSS
5.1 Un baseline global de “reducir movimiento”
/* Animaciones normales */
.fade-in { animation: fadeIn 200ms ease-out; }
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Para usuarios que prefieren reducir movimiento: detener/debilitar animaciones */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
transition-duration: 1ms !important;
scroll-behavior: auto !important;
}
}
Este enfoque global es potente, pero también puede borrar transiciones importantes—por eso en algunos productos es más seguro “detener solo clases específicas”.
5.2 Enfoque práctico: detener de forma fiable solo el movimiento más riesgoso
Prioriza suprimir:
- Parallax
- Movimiento grande (entradas con deslizamiento que mueven toda la pantalla)
- Efectos de carga en bucle
- Auto-scrolling
Esto reduce el riesgo para el usuario con mínimo quiebre de UX.
6. Recetas por patrón de UI: motion accesible por componente
6.1 Spinners (carga)
Fallo común: solo spinner, estado poco claro / movimiento demasiado fuerte
Arreglo: incluye siempre texto; reduce o detén el movimiento
<div role="status" aria-live="polite">
<span class="spinner" aria-hidden="true"></span>
Cargando…
</div>
.spinner {
width: 20px; height: 20px;
border: 3px solid #ddd;
border-top-color: #555;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.spinner { animation: none; }
}
6.2 Skeleton UI
Fallo común: pulso fuerte / bucles infinitos que fatigan
Arreglo: contraste bajo; shimmer lento; o hacerlo estático
.skeleton {
background: #eee;
position: relative;
overflow: hidden;
}
.skeleton::after {
content: "";
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
animation: shimmer 1.6s ease-in-out infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
.skeleton::after { animation: none; }
}
6.3 Toast notifications (p. ej., “Guardado”)
Fallo común: desaparece automáticamente / demasiado rápido para leer / roba foco
Arreglo: éxito con role="status" de forma discreta; errores críticos con role="alert" de forma fiable
- Éxito: breve, no intrusivo
- Errores: no auto-ocultar, o permitir cierre explícito
6.4 Acordeón / apertura-cierre de menús
Fallo común: deslizamiento grande / estado poco claro
Arreglo: minimizar animación de altura; indicar estado con texto/iconos
(ARIA debe seguir el patrón estándar “Disclosure” de tu artículo previo.)
6.5 Carrusel auto-avanzado (slider)
Conclusión: evitar autoplay es lo más seguro.
Si debes mantenerlo, como mínimo:
- Botón visible de Detener (siempre visible)
- Controles por teclado (Prev/Next/Detener)
- Auto-avance lento; pausar cuando tiene foco
- Desactivar auto-avance bajo
prefers-reduced-motion: reduce
7. Efectos de scroll: cómo tratar scroll-behavior: smooth
El smooth scrolling es conveniente, pero a algunas personas les molesta.
Si prefers-reduced-motion es reduce, vuelve a auto.
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
Además, cuando un click causa un salto grande, mueve el foco al destino (p. ej., con tabindex="-1") para evitar que usuarios de teclado “pierdan” su lugar.
8. Producción de contenido (editorial/PR): trampas de movimiento comunes
8.1 Embeds (social, anuncios, video)
Embeds externos pueden traer autoplay o parpadeo sin que lo notes.
- En páginas críticas (solicitudes, pagos, procedimientos), mantén embeds al mínimo
- Verifica si el embed ofrece controles como Detener o Silenciar
- Ofrece alternativas: resúmenes en texto y enlaces
8.2 GIFs animados
Los GIFs son fáciles de insertar, pero se repiten indefinidamente.
- Si el objetivo es “explicar”, una imagen estática + pasos es más suave
- Si debes usar GIF: que sean cortos, sin parpadeo, y considera video con controles de pausa
9. Llevarlo a un design system: motion tokens
Conectándolo con tu trabajo de design system: el movimiento es más seguro cuando se tokeniza.
--motion-fast: 150ms--motion-base: 200ms--motion-slow: 250ms--easing-standard: ease-out--easing-emphasis: cubic-bezier(...)
Luego fija reglas por escrito:
- “Sin efectos de movimiento a pantalla completa”
- “Sin autoplay (excepciones requieren botón Detener)”
- “Con reduce motion, detener efectos en bucle”
Esto evita “accidentes de motion” cuando cambian maintainers.
10. Prueba rápida de 5 minutos: checks mínimos de accesibilidad de motion
- Ningún flujo importante incluye autoplay (auto-scroll/media autoplay)
- No hay parpadeo (flicker fuerte)
- No hay parallax grande ni movimiento a pantalla completa (o se detiene con reduce)
- Estados de carga incluyen texto como “Cargando…”
- Skeletons no pulsan agresivamente / se detienen con reduce
- Carruseles (si existen) se pueden detener y el auto-avance se detiene con reduce
- Smooth scrolling se desactiva con reduce
- Mensajes importantes se comunican con
status/alerty no desaparecen instantáneamente (o se pueden cerrar)
11. Valor práctico por audiencia
- Personas con mareos/migraña/cinetosis: reducir movimiento hace que el sitio sea usable sin malestar físico.
- Personas con diferencias cognitivas: menos “tirones” de atención, más comprensión y finalización de tareas.
- Usuarios de lector de pantalla: cambios de estado llegan vía
status/alert, reduciendo actualizaciones perdidas. - Personas mayores / cansadas: menos estimulación hace el contenido más tranquilo de seguir.
- Equipos dev & ops: tokens y plantillas reducen regresiones e “incidentes de motion” durante updates.
12. Evaluación de accesibilidad: cómo este documento mapea a WCAG 2.1 AA
- Áreas clave cubiertas relacionadas con WCAG 2.1 AA
- 2.3.x (Parpadeo): evitar disparadores de convulsiones
- 1.4.13 (Contenido al pasar o enfocar): controlar motion disparado por hover/focus y permitir supresión
- 2.2.x (Temporización): cuidado con auto-dismiss y auto-advance
- 2.1.1 (Teclado): controles Detener/Cerrar deben funcionar con teclado
- 4.1.2 (Nombre, Rol, Valor): semántica correcta para mensajes de estado (
status/alert)
- El soporte de
prefers-reduced-motionno siempre se enmarca como un único requisito WCAG, pero en la práctica es una forma potente de hacer que AA se sostenga en la experiencia real vivida.
13. Conclusión: hacer del movimiento “información suave y controlable”
- Anima solo cuando sea necesario; evita movimiento decorativo permanente.
- Que sea corto y sutil, ligado a intención del usuario.
- Evita parpadeo; usa énfasis estático para urgencia.
- Parallax y movimiento grande causan mareo: usa alternativas sin motion para “profundidad”.
- Respeta
prefers-reduced-motion, suprime bucles y smooth scrolling. - Estandariza spinners, skeletons, notificaciones y carruseles para prevenir accidentes.
El movimiento, usado con intención, se vuelve una señal clara y útil.
Por eso debemos mantenerlo dentro de un rango seguro—silenciosa y cuidadosamente—para que el motion del producto se sienta bien y comunique bien para todo el mundo.