Animación y movimiento

¿Alguna vez viajaste en un auto, un barco o un avión y, de repente, sentiste que el mundo giraba? ¿O tuviste una migraña tan fuerte que las animaciones en tu teléfono o tablet, creadas para “deleitarte”, te hicieron sentir mal de repente? ¿O quizás siempre has sido sensible a todo tipo de movimiento? Estos son ejemplos de diferentes tipos de trastornos vestibulares.

A los 40 años, más del 35% de los adultos habrán experimentado algún tipo de disfunción vestibular. Esto puede provocar un episodio de mareos temporal, un vértigo inducido por migraña o una discapacidad vestibular más permanente.

Además de provocar vértigo, a muchas personas les resulta distraído el contenido que se mueve, parpadea o se desplaza. Es posible que las personas con ADHD y otros trastornos del déficit de atención se distraigan tanto con los elementos animados que olviden por qué visitaron tu sitio web o aplicación en primer lugar.

En este módulo, veremos algunas de las formas de ayudar mejor a las personas con todos los tipos de trastornos desencadenados por el movimiento.

Contenido intermitente y en movimiento

Cuando crees animaciones y movimientos, pregúntate si el movimiento del elemento es demasiado. Por ejemplo, los colores que parpadean de oscuro a claro o los movimientos rápidos en la pantalla pueden causar convulsiones en personas con epilepsia fotosensible. Se estima que el 3% de las personas con epilepsia sufre de foto sensibilidad, y es más común en las mujeres y las personas más jóvenes.

Los lineamientos sobre los elementos intermitentes del WCAG recomiendan no hacer lo siguiente:

Parpadea más de tres veces en un segundo
Tiembla por debajo del umbral de parpadeo general y parpadeo rojo.

En el mejor de los casos, estos destellos pueden provocar la incapacidad de usar una página web o, en el peor de los casos, causar enfermedades.

Para cualquier movimiento extremo, es imperativo que lo pruebes con la herramienta de análisis de epilepsia fotosensible (PEAT). PEAT es una herramienta gratuita que permite identificar si el contenido, el video o las animaciones de la pantalla pueden causar convulsiones. No es necesario que PEAT evalúe todo el contenido, pero, por seguridad, se debe evaluar el contenido que contiene transiciones rápidas o intermitentes entre colores de fondo claros y oscuros.

Otra pregunta que debes hacerte sobre la animación y el movimiento es si el movimiento del elemento es esencial para comprender el contenido o las acciones en la pantalla. Si no es esencial, considera quitar todo el movimiento, incluso los micromovimientos, del elemento que estás creando o diseñando.

Supongamos que crees que el movimiento del elemento no es esencial, pero podría mejorar la experiencia general del usuario, o bien que no puedes quitar el movimiento por otro motivo. En ese caso, debes seguir los lineamientos sobre el movimiento del WCAG. Los lineamientos establecen que debes crear una opción para que los usuarios puedan pausar, detener o ocultar el movimiento de los siguientes elementos: elementos de desplazamiento, parpadeo o movimiento no esenciales que se inician automáticamente, duran más de cinco segundos y forman parte de otros elementos de la página.

Cómo pausar, detener o ocultar el movimiento

Agrega un mecanismo para pausar, detener o ocultar la página para permitir que los usuarios desactiven la animación de movimiento potencialmente problemática. Puedes hacerlo a nivel de la pantalla o del elemento.

Por ejemplo, supongamos que tu producto digital incluye muchas animaciones. Considera agregar un interruptor de JavaScript accesible para permitir que los usuarios controlen su experiencia. Cuando el botón está activado en "sin movimiento", todas las animaciones se inmovilizan en esa pantalla y en todas las demás.

Usa consultas de medios

Además de ser selectivo con tus animaciones, darles a los usuarios opciones para pausar, detener, ocultar el movimiento y evitar bucles de animación infinitos, también puedes considerar agregar una consulta de medios centrada en el movimiento. Esto les brinda a los usuarios aún más opciones en cuanto a lo que se muestra en la pantalla.

`@prefers-reduced-motion`

Al igual que las consultas de medios centradas en el color del módulo de color, la consulta de medios @prefers-reduced-motion verifica la configuración del SO del usuario relacionada con la animación.

IU de la configuración de pantalla de macOS, en la que se activa la opción para reducir el movimiento.

Un usuario puede establecer preferencias de visualización para reducir el movimiento. Esta configuración es diferente en cada sistema operativo y puede estar enmarcada de forma positiva o negativa. Con @prefers-reduced-motion, puedes diseñar un sitio que respete estas preferencias.

Browser Support

Source

En macOS y Android, el usuario activa el parámetro de configuración para reducir el movimiento. En macOS, un usuario puede establecer Reducir movimiento en Configuración > Accesibilidad > Pantalla. La configuración de Android es Quitar animaciones. En Windows, el parámetro de configuración se enmarca de forma positiva como Mostrar animaciones, que está activado de forma predeterminada. El usuario debe desactivar este parámetro de configuración para reducir el movimiento.

Para garantizar la accesibilidad de las personas que tienen dificultades con el movimiento, incluso las animaciones más cortas que el umbral de 5 segundos que se describe en los lineamientos de AA de WCAG 2.0 deben abordarse con precaución. El método más confiable es fortalecer a los usuarios que indicaron una preferencia por reducir el movimiento proporcionándoles un control exclusivo sobre las animaciones, lo que les permite iniciar y detener la animación con controles específicos, como un botón de reproducción y un botón de pausa, respectivamente.

Mejora progresiva para el movimiento

Como diseñadores y desarrolladores, tenemos muchas opciones, incluidos los estados de movimiento predeterminados y la cantidad de movimiento que se mostrará. Vuelve a mirar el último ejemplo sobre el movimiento.

Supongamos que decidimos que la animación no es necesaria para comprender el contenido en la pantalla. En ese caso, podemos establecer el estado predeterminado en la animación de movimiento reducido en lugar de la versión de movimiento completo. A menos que los usuarios pidan animaciones de forma específica, estas se desactivarán.

No podemos predecir qué nivel de movimiento causará problemas a las personas con convulsiones, trastornos vestibulares y otros trastornos visuales. Incluso una pequeña cantidad de movimiento en la pantalla puede provocar mareos, visión borrosa o algo peor. Por lo tanto, en el siguiente ejemplo, no usaremos animación de forma predeterminada.

Consultas de medios en capas

Puedes usar varias consultas de medios para darles a los usuarios aún más opciones. Usemos @prefers-color-scheme, @prefers-contrast y @prefers-reduced-motion juntos.

Permite que los usuarios elijan

Si bien puede ser divertido incorporar animaciones en nuestros productos digitales para deleitar a los usuarios, es fundamental que recordemos que estos diseños afectarán a algunas personas. La sensibilidad al movimiento puede afectar a cualquier persona, desde una leve sensación de incomodidad hasta una enfermedad debilitante o una convulsión.

Puedes usar varias herramientas diferentes para permitir que el usuario decida qué es mejor para él, en lugar de adivinar qué tanto movimiento es demasiado. Por ejemplo, agrega un botón de activación para activar o desactivar la animación en tu sitio o aplicación web. Considera establecer de forma predeterminada ese botón de activación como desactivado.

Verifica tu comprensión

Pon a prueba tus conocimientos sobre la accesibilidad de los movimientos y las animaciones.

¿Qué podemos compilar que refleje la configuración del sistema operativo para el movimiento?

@prefers-reduced-motion

Sí. Esta consulta de medios te permite decidir cuánto movimiento usar en función de la configuración de la pantalla de un usuario. Esta configuración difiere según el sistema operativo, por lo que te recomendamos que implementes la opción de movimiento además de esta consulta de contenido multimedia.

Activadores de JavaScript

No exactamente. Los botones de activación permiten que el usuario tome una decisión después de llegar a tu sitio web, pero no pueden leer su configuración.