¿Alguna vez anduviste en un auto, una embarcación o un avión y de repente sentiste que el mundo giraba? ¿O has sufrido una migraña tan fuerte que una animación en tu teléfono o tablet creada para "deleitarte" y hacerte enfermar de repente? ¿O quizá siempre has sido sensible a todo tipo de movimiento? Estos son ejemplos de diferentes tipos de trastornos vestibulares.
Para los 40 años, más del 35% de los adultos habrá experimentado algún tipo de disfunción vestibular. Esto puede provocar mareos temporales, vértigo provocado por migrañas o una discapacidad vestibular más permanente.
Además de provocar vértigo, a muchas personas les distrae el contenido en movimiento, parpadeo o desplazamiento. Es posible que las personas con TDAH y otros trastornos de déficit de atención se distraigan tanto con los elementos animados que se olviden de por qué visitaron tu sitio web o app en primer lugar.
En este módulo, veremos algunas formas de ayudar mejor a las personas con todos los tipos de trastornos desencadenados por el movimiento.
Cómo escribir en la memoria flash y mover contenido
Cuando crees animación y movimiento, debes preguntarte si el movimiento del elemento es excesivo. Por ejemplo, los colores que parpadean de oscuros a claros o con 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 fotosensibilidad y es más común en las mujeres y las personas jóvenes.
Los lineamientos de escritura en la memoria flash de las WCAG recomiendan lo siguiente:
- Destella más de tres veces en un segundo
- Indica que está por debajo del umbral general de flash y destello rojo.
En el mejor de los casos, estos destellos pueden provocar la incapacidad de utilizar una página web o, en el peor, provocar una enfermedad.
En caso de movimientos extremos, es fundamental que los pruebes con la herramienta de análisis de epilepsia fotosensible (PEAT). PEAT es una herramienta gratuita que permite identificar si es probable que el contenido, el video o las animaciones de la pantalla causen convulsiones. No todo el contenido necesita ser evaluado por PEAT, pero el contenido que contiene transiciones rápidas o intermitentes entre los colores de fondo claro y oscuro debe evaluarse solo para ser seguro.
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 eliminar todo movimiento, incluso micromovimientos, del elemento que estás construyendo o diseñando.
Supongamos que crees que el movimiento del elemento no es esencial, pero que podría mejorar la experiencia general del usuario, o no puedes quitar el movimiento por otro motivo. En ese caso, debes seguir los lineamientos de movimiento de las WCAG. Los lineamientos establecen que debes compilar una opción para que los usuarios pausen, detengan u oculten el movimiento de los elementos no esenciales en movimiento, parpadeantes o de desplazamiento que se inicien automáticamente, duren más de cinco segundos y formen parte de otros elementos de la página.
Pausar, ocultar o detener movimiento
Agrega un mecanismo de pausar, ocultar o detener a tu 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 botón de activación de JavaScript accesible para permitir que los usuarios controlen su experiencia. Cuando el botón se cambia a "Movimiento desactivado", todas las animaciones se inmovilizan en esa pantalla y todas las demás.
Cómo usar consultas de medios
Además de ser selectivo con las animaciones y darles a los usuarios opciones para pausar, detener, ocultar movimiento y evitar los 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 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 en el módulo de color, la consulta de medios @prefers-reduced-motion verifica la configuración del SO del usuario en relación con la animación.
Un usuario puede configurar preferencias de pantalla para reducir el movimiento. Esta configuración es diferente según el sistema operativo y puede enmarcarse de manera positiva o negativa. Con @prefers-reduced-motion, puedes diseñar un sitio que respete estas preferencias.
En macOS y Android, el usuario activa la configuración para reducir el movimiento. En macOS, un usuario puede configurar la opción Reducir movimiento en Configuración > Accesibilidad > Pantalla. La configuración de Android es Quitar animaciones. En Windows, la configuración se enmarca de forma positiva como Mostrar animaciones, que está activada de forma predeterminada. El usuario debe desactivar este parámetro de configuración para reducir el movimiento.
De manera alternativa, como se muestra en el siguiente conjunto de ejemplos, puedes programar todas tus animaciones para que dejen de moverse en cinco segundos o menos, en lugar de reproducirse en un bucle infinito.
Mejora progresiva para el movimiento
Como diseñadores y desarrolladores, tenemos muchas opciones que tomar, incluidos los estados de movimiento predeterminados y cuánto movimiento mostrar. Veamos de nuevo el último ejemplo sobre el 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 para 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 en las personas con convulsiones, 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 usamos animación de forma predeterminada.
Consultas de medios por capas
Puedes usar múltiples consultas de medios para brindar aún más opciones a los usuarios. 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 recordar que algunas personas se verán afectadas por estos diseños. La sensibilidad al movimiento puede afectar a cualquier persona, desde una leve molestia hasta causar una enfermedad o convulsión debilitantes.
Puedes usar varias herramientas diferentes para permitir que el usuario decida qué es lo mejor para él, en lugar de adivinar cuánto movimiento es demasiado. Por ejemplo, agrega un botón de activación para activar o desactivar la animación dentro de tu sitio o aplicación web. Considera desactivar este botón de forma predeterminada.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre accesibilidad en movimiento y animación.
¿Qué podemos crear para reflejar la configuración del movimiento del sistema operativo?
@prefers-reduced-motion