Animación y movimiento

¿Alguna vez viajaste en auto, barco o avión y, de repente, sentiste que el mundo giraba? ¿O tuviste una migraña tan fuerte que las animaciones de tu teléfono o tablet, creadas para "deleitarte", de repente te hicieron sentir mal? ¿O tal vez siempre fuiste 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á experimentado alguna forma de disfunción vestibular. Esto puede provocar mareos temporales, vértigo inducido por migraña o una discapacidad vestibular más permanente.

Además de provocar vértigo, muchas personas consideran que el contenido en movimiento, parpadeante o que se desplaza es una distracción. Las personas con ADHD y otros trastornos por déficit de atención pueden distraerse tanto con tus elementos animados que olviden por qué fueron a tu sitio web o aplicación en primer lugar.

En este módulo, analizaremos algunas formas de brindar mejor asistencia a las personas con todo tipo de trastornos desencadenados por el movimiento.

Contenido intermitente y en movimiento

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

Los lineamientos sobre destellos de las WCAG recomiendan evitar lo siguiente:

• Parpadea más de tres veces en un segundo.
• Destellos por debajo del umbral de destello general y destello rojo

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

Para cualquier movimiento extremo, es fundamental que lo pruebes con la Herramienta de análisis de epilepsia fotosensible (PEAT). PEAT es una herramienta gratuita para identificar si el contenido, los videos o las animaciones de la pantalla pueden provocar convulsiones. No todo el contenido debe evaluarse con PEAT, pero el contenido que incluye transiciones rápidas o parpadeantes entre colores de fondo claros y oscuros debe evaluarse para mayor seguridad.

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 micro movimientos, 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 que no puedes quitar el movimiento por otro motivo. En ese caso, debes seguir los lineamientos sobre movimiento de las WCAG. Los lineamientos indican que debes crear una opción para que los usuarios pausen, detengan u oculten el movimiento de los siguientes elementos: elementos no esenciales que se mueven, parpadean o se desplazan, que se inician automáticamente, que duran más de cinco segundos y que forman parte de otros elementos de la página.

Pausar, detener u ocultar el movimiento

Agrega un mecanismo de pausa, detención u ocultamiento a tu página para permitir que los usuarios desactiven las animaciones de movimiento que puedan ser problemáticas. Puedes hacerlo a nivel de la pantalla o del elemento.

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

Usa consultas de medios

Además de ser selectivo con las animaciones, brindar a los usuarios opciones para pausar, detener y ocultar el movimiento, y evitar los bucles de animación infinitos, también puedes considerar agregar una consulta de medios enfocada en el movimiento. Esto les brinda a los usuarios aún más opciones cuando se trata de 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.

Un usuario puede establecer preferencias de pantalla para reducir el movimiento. Estos parámetros de configuración varían según el sistema operativo y pueden presentarse de forma positiva o negativa. Con @prefers-reduced-motion, puedes diseñar un sitio que respete estas preferencias.

En macOS y Android, el usuario activa el parámetro de configuración para reducir el movimiento. En macOS, el usuario puede establecer Reducir movimiento en Configuración > Accesibilidad > Pantalla. El parámetro de configuración de Android es Quitar animaciones. En Windows, el parámetro de configuración se presenta 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 a las personas que tienen dificultades con el movimiento, incluso las animaciones más cortas que el umbral de 5 segundos que se describe en las pautas de las WCAG 2.0 AA se deben abordar con precaución. El método más confiable es brindarles a los usuarios que indicaron una preferencia por el movimiento reducido el control exclusivo sobre las animaciones, lo que les permite iniciar y detener la animación con controles dedicados, 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 decisiones que tomar, incluidos los estados de movimiento predeterminados y la cantidad de movimiento que se debe mostrar. Vuelve a mirar el último ejemplo sobre movimiento.

Supongamos que decidimos que la animación no es necesaria para comprender el contenido de la pantalla. En ese caso, podemos optar por 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 soliciten específicamente animaciones, estas se desactivan.

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, usamos la opción predeterminada de no animación.

Consultas de medios en capas

Puedes usar varias consultas de medios para brindarles 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 algunas personas se verán afectadas por estos diseños. La sensibilidad al movimiento puede afectar a cualquier persona, desde provocar una ligera molestia hasta causar 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 cuánta actividad es demasiada. Por ejemplo, agrega un botón de activación para activar o desactivar la animación en tu sitio o app web. Considera establecer este botón como desactivado de forma predeterminada.