Un destello dorado en un botón puede señalar una acción; una rotación interminable junto a un párrafo puede competir con la lectura. La diferencia no está en lo costoso que parezca un efecto, sino en lo que hace. Antes de añadir una animación, termina esta frase: «Este movimiento ayuda a comprender…». Si no hay un final claro, el efecto es decorativo y debe ceder ante el contenido. Es un método de decisión editorial, no una promesa de mejores ventas.
Establece la acción antes que el efecto
Piensa en la tarjeta de un artículo. Su encabezado explica el tema, su extracto ofrece un motivo para leer y un enlace visible abre el texto completo. Un breve cambio de color al pasar el cursor puede reforzar esa acción. Pero si el enlace parece texto normal sin un brillo, el diseño de base necesita atención. Comprueba primero el contraste, el texto y la posición; añade el movimiento después. Un teléfono no tiene un cursor permanentemente encima, de modo que la acción principal debe seguir entendiéndose sin él.
Haz tres preguntas
¿Qué inicia la animación: la carga de la página, el desplazamiento o una acción deliberada? ¿Cuándo termina? ¿Seguirá teniendo sentido el resultado sin movimiento? En un menú, el estado abierto visible importa más que una larga entrada del panel. Un mensaje de finalización necesita palabras, no solo una chispa que desaparece. En la lista de comprobación del diseño, separa los efectos decorativos de los que comunican un cambio de estado. Esto hace que la discusión sea más útil que un simple intercambio de gustos.
Reducir el movimiento no debe eliminar la experiencia
MDN describe prefers-reduced-motion como una forma de respetar la preferencia del dispositivo por menos movimiento no esencial. No arregla un sitio automáticamente: diseñadores y desarrolladores deben decidir una alternativa. Detén una rotación o sustituye una transición de gran recorrido por una aparición inmediata, manteniendo las etiquetas, el acceso al menú y los estados claros de los botones. No ocultes un bloque animado entero si también contiene información útil. Comprueba los efectos controlados por JavaScript además de las animaciones CSS.
Ofrece a los visitantes el control adecuado
El criterio WCAG 2.2.2, de nivel A, trata la información en movimiento que comienza automáticamente, dura más de cinco segundos y aparece junto a otro contenido. En las condiciones que establece, se exige una forma de pausarla, detenerla u ocultarla salvo que el movimiento sea esencial. La información que se actualiza automáticamente tiene condiciones distintas. Esto no es un permiso general para cualquier animación de menos de cinco segundos. El criterio 2.3.3, de nivel AAA, trata por separado la desactivación de animaciones no esenciales provocadas por una interacción. Un solo interruptor no demuestra que todo un sitio web cumpla las WCAG.
Una comprobación práctica antes de publicar
Sigue la misma ruta con los ajustes habituales de movimiento y con el movimiento reducido activado: abre el menú, lee una tarjeta, visita un artículo y vuelve. Comprueba que el contenido siga disponible y los controles conserven estados significativos. Repite con un teclado y en un teléfono. Donde existan controles de movimiento, comprueba su accesibilidad y la claridad de las etiquetas. Por último, observa la página después de un minuto de lectura: un efecto atractivo al principio puede volverse intrusivo. El objetivo no es eliminar la personalidad del sitio, sino permitir usarlo con comodidad.