Las animaciones web accesibles parten de un acuerdo sencillo: cualquier persona debe poder entender la página y completar su tarea sin depender de movimientos decorativos. Conserva las animaciones que expliquen un cambio útil, ofrece una presentación más tranquila cuando alguien solicite reducir el movimiento y permite controlar los movimientos continuos cuando sea necesario.
Para una empresa que encarga una web, la cuestión práctica es qué incluir en el documento de requisitos y cómo revisar la entrega. Esta guía ofrece un inventario de animaciones, una tabla de decisiones y una lista de comprobación para aceptar el trabajo. Puedes usarlos tanto en un diseño nuevo como en una web existente, sin tener que decidir por tu cuenta cada detalle de implementación.
1. Asigna un propósito a cada elemento en movimiento
Empieza enumerando todo lo que se mueve durante un recorrido habitual del cliente. Abre la página de inicio, lee la descripción de un servicio, despliega una pregunta y llega al formulario de contacto. Incluye la animación inicial, los efectos al desplazarse por la página, las diapositivas automáticas, el vídeo de fondo, las transiciones del menú, los indicadores de carga y los mensajes de confirmación. Observa más allá de la cabecera principal: los efectos pequeños pueden acumularse a lo largo de una página.
Para cada elemento, describe qué información obtiene el visitante gracias al movimiento. La apertura de un panel puede mostrar dónde se encuentra la información adicional. Un indicador de progreso puede explicar que una solicitud sigue procesándose. Un objeto decorativo que gira puede reforzar la identidad visual, pero no debe ser la única forma de descubrir el servicio o encontrar el siguiente botón.
Escribe el resultado que buscas antes de hablar de duración o estilo. «El cliente puede ver qué pregunta está desplegada» deja al diseñador margen para elegir una solución clara. «Todas las secciones deben entrar volando» compromete el proyecto con un efecto antes de comprobar si resulta útil. Pide al equipo que muestre una versión estática junto al concepto animado.
Prepara un breve inventario de animaciones
Un inventario útil recoge la página, el elemento, qué lo activa, su propósito, si se repite, el comportamiento propuesto con movimiento reducido y quién lo revisará. Añade una columna con evidencias: la dirección de una vista previa, una grabación o una nota de prueba. Así tendrás un pequeño documento de aceptación que podrás consultar cuando una nueva campaña incorpore otro carrusel o vídeo.
2. Acuerda cómo debe funcionar la versión más tranquila
MDN documenta prefers-reduced-motion como una forma de que una web detecte la preferencia de reducir el movimiento no esencial. Es una señal a la que debe responder la implementación. Activar el ajuste del dispositivo no rediseña automáticamente todas las animaciones de una web.
Pide que se decida el comportamiento de cada efecto. Un zoom amplio podría sustituirse por un cambio de estado inmediato; un fondo decorativo en movimiento, por una imagen fija. Una respuesta desplegable puede aparecer sin recorrer la pantalla. No aceptes «ralentizamos todo» como plan completo: un movimiento amplio más lento también puede ser una parte innecesaria de la experiencia.
| Elemento y propósito | Presentación más tranquila que valorar | Pregunta para aceptar el resultado |
|---|---|---|
| El movimiento decorativo de la cabecera establece el estilo visual | Utilizar una composición estática cuidada | ¿Puede el visitante leer la oferta y utilizar el enlace principal de inmediato? |
| Las secciones aparecen a medida que el visitante se desplaza por la página | Mostrar el contenido sin grandes desplazamientos ni esperas | ¿Están disponibles todas las secciones al desplazarse rápidamente y al navegar con teclado? |
| Un menú muestra las opciones de navegación | Abrir y cerrar en el mismo lugar, con un estado claro | ¿Puede el visitante acceder a los enlaces y volver al control que abre el menú? |
| Un carrusel presenta varias ofertas | Proporcionar controles explícitos y un estado estático o en pausa acordado | ¿Se puede acceder a todas las ofertas sin apresurarse por los cambios automáticos? |
| Un formulario indica el procesamiento y la finalización | Mantener un texto de estado comprensible y una confirmación estable | ¿Sabe el visitante si debe esperar, volver a intentarlo o continuar? |
Esta tabla es un ejemplo de planificación, no una prueba de que una web concreta cumpla una norma de accesibilidad. Sustituye sus filas por los componentes reales de tu proyecto. Anota qué ocurre en la primera carga y qué debería pasar si la preferencia cambia mientras la página está abierta. Pide al desarrollador que identifique cualquier componente de terceros cuyo comportamiento requiera una comprobación independiente.
3. Distingue entre preferencias, controles y criterios de accesibilidad
La compatibilidad con el movimiento reducido y un botón de pausa resuelven problemas relacionados, pero distintos. Una preferencia puede seleccionar una experiencia más tranquila desde el principio. Un control visible puede permitir detener un movimiento continuo mientras se lee. El documento de requisitos debe explicar ambos aspectos allí donde correspondan, sin tratar ninguno como sustituto universal del otro.
El criterio 2.3.3 de WCAG 2.2, Animación a partir de interacciones, es de nivel AAA. Aborda la posibilidad de desactivar las animaciones de movimiento activadas por una interacción, salvo que sean esenciales para la funcionalidad o la información. No presentes este criterio concreto como un requisito de nivel AA.
El criterio 2.2.2, Poner en pausa, detener, ocultar, es de nivel A. Su disposición sobre contenido en movimiento se aplica cuando el movimiento comienza automáticamente, dura más de cinco segundos y aparece junto a otro contenido, con una excepción para las actividades esenciales. También incluye una disposición independiente sobre información que se actualiza automáticamente, sin esa excepción de los cinco segundos. Estas distinciones importan al revisar un carrusel, una banda de noticias o un fondo animado.
Pregunta al proveedor con qué criterios y nivel de conformidad se evaluará el proyecto, quién realizará la evaluación y qué evidencias se entregarán. Superar una lista de comprobación de movimiento reducido no demuestra la conformidad completa con WCAG. Revisar el movimiento es una parte de una revisión más amplia que también considera la estructura, los métodos de entrada, el contraste, las alternativas y otros requisitos.
Comprueba que los controles permitan controlar de verdad
Un control de pausa debe ser fácil de encontrar, comprensible y utilizable con los métodos de entrada acordados. Comprueba qué ocurre al llevar el foco a otro lugar o abrir otro componente. Un carrusel que se reanuda en cuanto el visitante abandona el botón de pausa no ofrece una pausa útil para leer. Acordad si la preferencia o la pausa deben mantenerse al navegar y después comprobad ese comportamiento.
4. Mantén la tarea operativa cuando cambie el movimiento
La versión más tranquila debe seguir funcionando como una página completa. Eliminar una animación no debe dejar texto transparente, elementos de navegación fuera del área visible o un botón a la espera de que termine una animación. Pide al desarrollador que demuestre que el contenido alcanza su estado final utilizable incluso cuando la secuencia decorativa no se ejecuta.
Sigue el foco del teclado por los menús, los cuadros de diálogo y las secciones desplegables. ¿Puedes ver dónde estás? ¿Abrir un componente te sitúa en un contexto lógico y cerrarlo te devuelve al lugar esperado? Evita un diseño en el que el movimiento visual sea la única pista de que algo ha cambiado. Las etiquetas claras, los estados de selección y una disposición estable también deben transmitir el significado.
Presta especial atención a los formularios. Una figura que gira, por sí sola, no explica si una solicitud se está procesando, ha fallado o se ha completado. Pide mensajes de estado claros y que las actualizaciones importantes se comuniquen adecuadamente a las tecnologías de apoyo. Si el equipo elimina el indicador giratorio en la versión más tranquila, el estado real y la siguiente acción deben seguir estando disponibles.
Para el contenido que se mueve al desplazarse por la página, compara el desplazamiento lento, el rápido y la navegación con teclado. Comprueba si los encabezados, precios o controles desaparecen antes de poder leerlos. La información esencial no debe exigir un gesto sincronizado con precisión. Si una narración visual necesita una secuencia, acordad una forma accesible de llegar a la misma información sin realizarla.
Ejemplo hipotético de revisión de una página de servicios
Imagina una consultoría con una animación decorativa en la cabecera y un formulario de contacto. En su versión más tranquila, la cabecera pasa a ser una imagen fija, los detalles de los servicios aparecen de inmediato y el formulario conserva su mensaje de procesamiento y su confirmación. La persona que revisa la web comprueba el mismo recorrido de contacto en ambas versiones. Esto ilustra un método de aceptación; no es un resultado comunicado por un cliente ni una promesa de aumentar las conversiones.
5. Revisa las páginas terminadas en ambos modos
Solicita la vista previa de la versión exacta que se vaya a publicar. Revísala con el ajuste habitual de movimiento y después con la preferencia de movimiento reducido del dispositivo o navegador activada. Un archivo de diseño puede comunicar la intención, pero no demuestra cómo responde la página desarrollada. Registra el navegador, el dispositivo, el ajuste y la dirección de la página junto a cada observación.
Utiliza un conjunto pequeño y repetible de tareas: leer la oferta, abrir la navegación, desplegar detalles complementarios y llegar al formulario de contacto. En un entorno de pruebas, incluye los estados de éxito y error del formulario que hayáis acordado. No envíes consultas reales de clientes solo para probar las animaciones. El equipo del proyecto debe facilitar una forma segura de examinar estos estados sin activar mensajes operativos.
Comprueba la web en un móvil y en un ordenador, y utiliza el teclado además de la pantalla táctil o un dispositivo apuntador, según corresponda. Aumenta el tamaño del texto para comprobar si los elementos superpuestos en movimiento ocultan contenido. Si un efecto depende de pasar el cursor por encima, pregunta cómo se accede a esa misma información mediante interacción táctil. Incluye las herramientas de reserva integradas, los vídeos y otros componentes externos que formen parte del recorrido del cliente.
Describe los fallos con ejemplos observables. «Con movimiento reducido activado, al abrir el menú móvil el enlace de contacto queda invisible» permite actuar. «La animación no se siente bien» necesita más explicación. Incluye los pasos, el comportamiento esperado y una grabación breve cuando el problema sea el movimiento. Tras una corrección, repite la tarea afectada en la vista previa corregida.
6. Pide evidencias acordes con lo que se afirma
Conserva el inventario de animaciones junto a los resultados. Cada fila debe indicar qué se ha probado, qué ha superado la revisión, qué sigue sin resolverse y quién se encarga de la siguiente acción. Pide las páginas y los estados concretos que se han revisado, en lugar de una insignia que diga «accesible». Un informe automatizado puede ayudar a identificar algunos problemas, mientras que la revisión manual de tareas revela comportamientos que requieren observación directa.
La documentación de Lighthouse de Chrome explica que las comprobaciones manuales de accesibilidad no contribuyen a su puntuación de accesibilidad. Por tanto, una puntuación de 100 no demuestra que se hayan evaluado todos los requisitos de accesibilidad. Pide los resultados de la revisión manual además del informe automatizado, en especial para los controles de movimiento y el recorrido completo hasta enviar una consulta.
Revisa el rendimiento por separado. Pregunta qué versión, perfil de dispositivo y condiciones dieron lugar al resultado de laboratorio y si se comprobaron las interacciones importantes después de la carga inicial. Un efecto decorativo que se ve fluido en el ordenador del diseñador sigue necesitando una evaluación en los dispositivos objetivo acordados. La preferencia de movimiento reducido no es un indicador fiable de que el dispositivo sea más lento, y la presentación habitual también necesita una revisión adecuada del rendimiento.
Mantén la precisión de las afirmaciones en la entrega. «Estos cinco componentes se han probado con movimiento reducido activado en estos navegadores» es una evidencia útil. «Totalmente accesible porque las animaciones están desactivadas» no es una conclusión que esta lista de comprobación permita sostener. Si el proyecto incluye una evaluación de accesibilidad más amplia, registra por separado su alcance y las incidencias pendientes.
7. Incluye el movimiento en los requisitos y en la entrega
Antes de aceptar el trabajo, acordad estas decisiones por escrito. Permiten revisar una preferencia visual y ayudan a que quienes editen la web en el futuro no vuelvan a introducir un problema sin resolver.
- Propósito: cada componente en movimiento tiene una función definida y una persona responsable de su contenido.
- Alternativa: el comportamiento con movimiento reducido está definido, implementado y comprobado en las páginas reales.
- Control: el movimiento continuo y las actualizaciones automáticas cuentan con los controles y el comportamiento acordados.
- Continuidad: el contenido, el foco del teclado, los mensajes de estado y la tarea principal del cliente siguen siendo utilizables.
- Evidencias: las notas de revisión identifican la versión, los entornos, los resultados y las incidencias sin resolver.
- Mantenimiento: alguien sabe cómo revisar los nuevos vídeos, elementos integrados y componentes de campañas después del lanzamiento.
Envía tu inventario, las páginas de referencia y el recorrido prioritario del cliente con la consulta sobre el proyecto. Nuestra guía para preparar los requisitos de un proyecto web ayuda a organizar el alcance general, y la lista de comprobación para rediseñar una web ayuda a decidir qué conservar y volver a probar en una web existente.
El paquete web actual de Digital Studio parte de 2.190 EUR e incluye hasta cinco páginas adaptables a distintos dispositivos, fundamentos de SEO, un formulario de captación de clientes potenciales y el lanzamiento en tu dominio. Revisa los servicios y el alcance actuales y describe tus requisitos de movimiento y accesibilidad en el formulario de requisitos web. Acuerda expresamente cualquier evaluación especializada y trabajo adicional; no des por hecho que el precio de un paquete garantiza una certificación de accesibilidad concreta.
