Movimiento, tiempo y contenido dinámico (2.2.1, 2.2.2, 2.3.1, 4.1.3)

Las interfaces actuales se mueven: carruseles que avanzan solos, avisos que aparecen y desaparecen, animaciones al desplazarse, sesiones que caducan, resultados que se actualizan sin recargar. Para muchas personas ese dinamismo es una barrera: quien lee despacio no termina el texto antes de que cambie, quien tiene un trastorno vestibular se marea con el efecto parallax, quien tiene epilepsia fotosensible puede sufrir una crisis y quien usa lector de pantalla no se entera de un aviso que nadie le anuncia. Esta lección recorre las decisiones de diseño sobre movimiento, tiempo y mensajes dinámicos. Su implementación técnica (por ejemplo, con prefers-reduced-motion) se trabaja en el curso N3-C6, y el vídeo y el audio que se reproducen solos, en N2-C5.

Lo que se mueve solo: 2.2.2 Poner en pausa, detener, ocultar (A)

El criterio distingue dos casos:

• Contenido en movimiento, parpadeante o con desplazamiento que empieza automáticamente, dura más de cinco segundos y se presenta junto a otro contenido: debe haber un mecanismo para pausarlo, detenerlo u ocultarlo, salvo que el movimiento sea esencial. Ejemplos (véase la explicación oficial): carruseles automáticos, teletipos de noticias, banners animados, fondos de vídeo decorativos, animaciones en bucle.
• Contenido que se actualiza automáticamente (cotizaciones, marcadores deportivos, un panel de llegadas de trenes) y se presenta junto a otro contenido: debe poder pausarse, detenerse, ocultarse o controlarse la frecuencia de actualización, salvo que sea esencial.

Decisiones de diseño que funcionan:

• Evita el avance automático en los carruseles. Si el cliente lo exige, el botón «Pausar» va visible, con texto o con nombre accesible, y es el primer control del carrusel en el orden de foco. Detenerlo al pasar el ratón o al recibir el foco ayuda, pero no sustituye a un botón que la persona controla.
• Animaciones decorativas cortas: si duran menos de cinco segundos y se detienen solas, no necesitan control, pero piensa si aportan algo.
• Datos en tiempo real: ofrece «Pausar actualizaciones» o una actualización bajo petición («Actualizar llegadas»).

Destellos y animaciones que marean

2.3.1 Umbral de tres destellos o menos (A)

Nada debe destellar más de tres veces en un segundo, salvo que el destello esté por debajo de los umbrales generales de destello y de destello rojo. Afecta a vídeos, animaciones de producto, efectos de transición y banners «de impacto». En diseño, la regla práctica es simple: no diseñes destellos, y menos aún en rojo saturado o en áreas grandes de la pantalla.

2.3.3 Animación por interacciones (AAA) y la preferencia de movimiento reducido

El criterio AAA pide que las animaciones de movimiento provocadas por una interacción (el contenido que se desliza al desplazarse, el efecto parallax, el zoom al abrir una tarjeta) se puedan desactivar, salvo que sean esenciales. Aunque es AAA, es una buena práctica fácil de diseñar, porque los sistemas operativos ya ofrecen el ajuste «Reducir movimiento» y la web puede leerlo con la consulta prefers-reduced-motion. Lo que el diseño debe entregar es la versión reducida de cada animación: un fundido en lugar de un desplazamiento, un cambio instantáneo en lugar de un zoom, ningún parallax.

/* Incorrecto: parallax y transiciones largas para todo el mundo */
.hero { background-attachment: fixed; }
.tarjeta { transition: transform 1.2s; }

/* Correcto: la versión reducida definida en diseño se aplica
   cuando la persona ha activado «Reducir movimiento» */
@media (prefers-reduced-motion: reduce) {
  .hero { background-attachment: scroll; }
  .tarjeta { transition: opacity 0.2s; }
}

Límites de tiempo: 2.2.1 Tiempo ajustable (A)

Si el contenido impone un límite de tiempo (una sesión que caduca, un formulario que debe completarse en diez minutos, un mensaje que desaparece), debe cumplirse al menos una de estas opciones:

• Desactivar: la persona puede quitar el límite antes de encontrarlo.
• Ajustar: puede ampliarlo antes de encontrarlo, al menos hasta diez veces su duración por defecto.
• Ampliar: se le avisa antes de que expire y dispone de al menos 20 segundos para ampliarlo con una acción simple («pulsa cualquier tecla», un botón), y puede ampliarlo al menos diez veces.

Hay excepciones, detalladas en la explicación oficial del criterio: los eventos en tiempo real (una subasta), los casos en que el límite es esencial y ampliarlo invalidaría la actividad (un examen cronometrado, si el tiempo forma parte de lo que se evalúa), y los límites de más de 20 horas.

La opción más habitual es avisar y ampliar, y su diseño importa. El aviso es un diálogo modal con un título claro («Tu sesión va a caducar»), el tiempo restante en texto, un botón principal «Seguir conectado» y uno secundario «Cerrar sesión». No hace falta una cuenta atrás que cambie cada segundo y que el lector de pantalla anuncie sin parar: basta con decir el tiempo al abrir el aviso. El criterio 2.2.6 Tiempos de espera (AAA) añade una buena práctica: avisar de cuánto tiempo de inactividad provoca la pérdida de datos, salvo que se conserven más de 20 horas. En formularios largos, como una declaración o una solicitud de subvención, guardar borradores automáticamente evita el problema de raíz.

Mensajes que aparecen: 4.1.3 Mensajes de estado (AA)

Un mensaje de estado informa del resultado de una acción, del progreso o de un error sin cambiar de contexto: «Producto añadido al carrito», «12 resultados», «Guardando…», «Guardado», «No se ha podido conectar». El criterio exige que esos mensajes se puedan comunicar a la tecnología de apoyo sin moverle el foco a la persona. El diseño no escribe el código, pero sí decide:

Situación	Qué especifica el diseño	Cómo se anotará
Producto añadido, filtro aplicado, número de resultados	Texto exacto del mensaje y dónde aparece	Región de estado (role="status"), anuncio no intrusivo
Error que impide continuar o pérdida inminente de datos	Texto exacto, icono y no solo color	Alerta (role="alert"), anuncio inmediato
Proceso largo (subida de ficheros, pago)	Estados «Subiendo 2 de 5», «Completado» y qué pasa si falla	Región de estado y foco solo si cambia la tarea
Diálogo de sesión a punto de caducar	Título, tiempo restante y botones	Diálogo modal; aquí sí se mueve el foco

Reserva las alertas para lo urgente: si todo se anuncia como alerta, el lector interrumpe constantemente y la persona deja de prestar atención.

Cambios que nadie ha pedido

En la lección sobre layout y coherencia vimos 3.2.1 y 3.2.2: nada cambia de contexto por recibir el foco o por cambiar un valor. Añade a tu lista dos prácticas más. Primera, el criterio 3.2.5 Cambio a petición (AAA): las redirecciones automáticas, las ventanas nuevas sin aviso o las recargas periódicas de la página solo deben ocurrir cuando la persona las pide. Segunda, evita insertar contenido por encima de donde está leyendo la persona (un banner que aparece tarde y empuja todo hacia abajo): quien usa ampliación pierde la posición y quien está a punto de pulsar un botón pulsa otro.

Resumen

• 2.2.2 Poner en pausa, detener, ocultar (A): todo lo que se mueve más de cinco segundos o se actualiza solo, junto a otro contenido, necesita control; mejor sin avance automático.
• 2.3.1 Umbral de tres destellos o menos (A) y 2.3.3 Animación por interacciones (AAA): sin destellos y con una versión reducida de cada animación para quien activa «Reducir movimiento».
• 2.2.1 Tiempo ajustable (A): desactivar, ajustar hasta diez veces o avisar con al menos 20 segundos para ampliar; guarda borradores en formularios largos.
• 4.1.3 Mensajes de estado (AA): el diseño fija el texto de cada mensaje y si es estado o alerta; ninguna acción importante vive solo en un aviso que desaparece.
• Sin cambios de contexto ni saltos de contenido que la persona no haya pedido (3.2.1, 3.2.2, 3.2.5).