Animaciones y accesibilidad: el movimiento reducido

El movimiento guía la mirada, da ritmo, hace sentir una textura. A algunos de tus visitantes les provoca también mareos, náuseas, o les impide leer. Las reglas que los protegen son pocas y precisas: un ajuste del sistema, dos criterios de las WCAG, las pautas internacionales de accesibilidad web, y un límite a los destellos.

A quién molesta el movimiento

• Las personas con un trastorno vestibular, del oído interno que mantiene el equilibrio. Una página que se desliza, hace zoom o se desplaza a varias velocidades puede causarles mareos, náuseas, dolores de cabeza, a veces una migraña que las obliga a tumbarse (W3C). MDN cita el zoom y el movimiento de grandes superficies entre los desencadenantes.
• Las personas con un trastorno de la atención, dificultades de lectura o una discapacidad intelectual. Un elemento que se mueve junto al texto atrae sin cesar la mirada y distrae de la lectura (W3C). El movimiento estorba también a los lectores de pantalla.
• Las personas con epilepsia fotosensible, para quienes los destellos rápidos pueden provocar una crisis (W3C).

Los dos primeros grupos tienen cada uno su criterio, que a menudo se confunden. El tercero tiene una regla aparte.

El ajuste «reducir el movimiento»

Windows, macOS, iOS y Android permiten pedir menos animaciones: desactivar «Efectos de animación» en Windows 11, «Reducir movimiento» en iPhone y en Mac, «Quitar animaciones» en Android. Los navegadores transmiten esta elección a las páginas, que la leen con la consulta CSS prefers-reduced-motion. Su valor es reduce cuando el visitante lo ha pedido, no-preference si no, y funciona en todos los navegadores corrientes desde enero de 2020 (MDN).

El ajuste pide menos movimiento: quitar lo que decora, conservar lo que informa (web.dev). El método más seguro es escribir tus animaciones bajo la condición no-preference: solo los visitantes que no han pedido nada las ven, y los demás reciben una página tranquila por defecto. En concreto:

El fundido sigue permitido: para el criterio 2.3.3, el W3C no cuenta como movimiento un cambio de opacidad, de color o de desenfoque que no modifica ni el tamaño, ni la forma, ni la posición de un elemento.

WCAG 2.3.3: el movimiento que provoca el visitante

Lo que exige. Una animación de movimiento provocada por una acción del visitante (desplazarse, hacer clic, pasar el ratón) debe poder desactivarse, salvo si es esencial. Una animación es esencial cuando quitarla cambiaría el sentido o la función del contenido: la vista previa de un programa de animación, por ejemplo.

A quién sirve. A las personas con trastornos vestibulares.

Su nivel. AAA, el más exigente de los tres niveles. Rara vez se impone, pero describe con precisión lo que viven estas personas.

Cómo cumplirlo. El W3C sugiere respetar prefers-reduced-motion, en CSS o en JavaScript, u ofrecer en el sitio un ajuste que desactive las animaciones. Para este criterio, seguir el ajuste del sistema es, pues, una respuesta reconocida.

WCAG 2.2.2: lo que se mueve solo

Lo que exige. Todo contenido que se mueve, parpadea o se desplaza debe poder ponerse en pausa, detenerse u ocultarse por el visitante, si cumple tres condiciones a la vez:

1. empieza solo;
2. dura más de cinco segundos;
3. se muestra al mismo tiempo que otro contenido.

Solo escapa el movimiento esencial para la actividad. El criterio cubre también los contenidos que se actualizan solos, como un hilo de noticias, sin el plazo de cinco segundos.

A quién sirve. A las personas con un trastorno de la atención o dificultades de lectura, y a quienes leen despacio o siguen con dificultad lo que se mueve.

Su nivel. A, el primero. Se aplica a todo lo que contiene la página, decoración incluida: un solo elemento en movimiento puede estorbar el uso de todo lo demás (W3C).

Lo que afecta en la práctica. Un carrusel automático, un banner que se desplaza, un contador que gira en bucle, un vídeo de fondo que se reproduce sin fin: todos cumplen las tres condiciones. Una animación de entrada de dos segundos no está afectada.

El movimiento reducido no basta aquí. El W3C no cuenta prefers-reduced-motion entre las técnicas que satisfacen el 2.2.2. La persona a la que distrae tu bucle no ha cambiado necesariamente ese ajuste, ni siquiera sabe que existe. Hace falta un medio visible en la página: la técnica G4 del W3C describe un botón que pone en pausa y reanuda donde se detuvo. Colócalo cerca del contenido en movimiento, dale un nombre claro («Pausar el vídeo»), y hazlo utilizable con el teclado.

En Francia, el RGAA, la norma de accesibilidad de la administración, traduce este criterio en el 13.8: un movimiento lanzado automáticamente debe durar cinco segundos como mucho, o poder detenerse y reiniciarse, ocultarse, o sustituirse por la información sin movimiento, mediante un botón por ejemplo. Precisa que una pausa obtenida solo al poner el foco en el elemento no cuenta.

El paralaje

El paralaje desplaza el fondo más despacio que el primer plano, para dar profundidad. El W3C lo cita como ejemplo típico de animación provocada por el desplazamiento: a menudo decorativo, debería poder desactivarse.

Si quieres usarlo:

• mantén una amplitud débil, en una zona limitada más que en toda la pantalla;
• no conviertas el desplazamiento vertical en movimiento horizontal, caso que el W3C toma como ejemplo;
• congélalo cuando el visitante ha pedido menos animación;
• comprueba el texto colocado encima: debe seguir legible en todas las posiciones (ver la paleta de colores).

Los destellos: tres por segundo como mucho

El criterio 2.3.1 (nivel A) prohíbe todo lo que destella más de tres veces en un segundo, salvo si los destellos se quedan por debajo de umbrales precisos de superficie e intensidad. El rojo saturado es el más peligroso (W3C). El RGAA recoge la regla en su criterio 13.7.

Para un vídeo de fondo, míralo entero antes de publicarlo: un relámpago, un neón que zumba, una luz estroboscópica, una serie de cortes rápidos entre una imagen oscura y una clara pueden superar el límite. Corta o ralentiza el pasaje en cuestión.

En los sitios que compone el estudio 29webs, el vídeo de fondo se desvanece cuando el visitante ha pedido menos animación, y su imagen fija se queda en pantalla.

En resumen: escribe tus animaciones bajo la condición no-preference, sustituye los deslizamientos por fundidos, congela el paralaje y los vídeos cuando se pide movimiento reducido, y añade un botón de pausa a todo lo que se mueve solo más de cinco segundos. Ningún destello más de tres veces por segundo.