Accesibilidad web

Accesibilidad y animaciones: Consideraciones para aplicarlas correctamente

Diseño 4 min. de lectura

La accesibilidad siempre será un eje importante dentro de cualquier interfaz. Su aplicación debe existir inclusive en aquellos elementos más pequeños, como lo son las animaciones, pero ¿Qué debes tener en cuenta para que cumplan con las pautas de accesibilidad? Aquí te lo contamos.

Animaciones en una plataforma

Anteriormente, hemos destacado las bondades de las microinteracciones y cómo nos ayudan a optimizar la navegación e interacción de los usuarios con un sistema. Por ello, también es importante mencionar que las diferentes animaciones que integremos en alguna interfaz también serán de ayuda para mejorar la experiencia del usuario. 

Sin embargo, del mismo modo que verificamos que los textos de una interfaz sean legibles sobre el color que utilicemos, también debemos hacer lo mismo con las animaciones que integremos. Pero, ¿Cómo es posible esto?

Una aclaración importante es que, las animaciones que estén en una interfaz deben estar enfocadas en resolver los problemas de los usuarios. Su misión no es desorientarles o crear posibles dificultades. Por ello, incluir muchas animaciones puede ser contraproducente, ya que hará que las personas pierdan la concentración y además, hace más lenta la carga del sitio.

Accesibilidad y animaciones

Teniendo lo anterior en cuenta, ¿Qué consideramos por una animación accesible? Básicamente, es diseñar para mejorar la experiencia de algunos usuarios pero sin impedir la de otros. Para esto, es importante tener presente que existen personas con baja visión u otras que sufren de epilepsia por estímulos visuales y en consecuencia, se ven perjudicadas ante su presencia.

En el caso de las personas con baja visión puede que no vean la animación y se pierdan una parte importante de la interfaz; también, puede que se abrumen ante la inmensa cantidad de movimiento en la interfaz. Por otro lado, en el caso de las personas que usan un lector de pantalla no verán la animación, lo que significa que, por el motivo que la utilizamos o integramos, ellos no lo sabrán.

Entonces ¿Cómo hacemos que una animación sea accesible? Para esto debemos considerar algunos puntos.

Seguir las guías de WCAG para animaciones

La Web Content Accessibility Guidelines (WCAG), nos entrega algunas pautas a considerar en las animaciones. Algunas de ellas son:

Pause, Stop, Hide 

Para todo elemento que se mueva, parpadee o haga scroll y dura más de 5 segundos, debe existir la opción para que el usuario detenga u oculte el movimiento. Y para los elementos que se actualizan automáticamente y se presentan en paralelo con otros similares, el usuario debe tener la opción de pausar, ocultar o controlar la frecuencia con la que se actualiza.

Three Flashes or Below Threshold 

Este punto está pensado específicamente en las personas que sufren de epilepsia por estímulos visuales. Por eso, se señala que debemos tener en cuenta el parpadeo de las imágenes, por ejemplo : “Una película con una escena que involucra relámpagos muy brillantes se edita de modo que el relámpago solo parpadee tres veces en un período de un segundo.”

Estas dos guías/reglas son de nivel A, por lo que es importante considerarlas y aplicarlas en nuestro trabajo. De esta forma, nuestro sitio web será más accesible para los usuarios.

Ten en cuenta las preferencias del usuario

Los usuarios pueden elegir en sus navegadores las preferencias para las animaciones que se mostrarán. Algunos prefieren una menor cantidad de movimiento en la pantalla por diferentes motivos, así que lo mejor que podemos hacer es respetar esa preferencia y adaptar nuestros diseños. 

La diseñadora Val Head tiene unos artículos relacionados Designing With Reduced Motion For Motion Sensitivities y Designing Safer Web Animation For Motion Sensitivity, los cuales nos ayudaran a saber más cómo lograr este importante punto. 

Entrega el poder a los usuarios

El punto anterior es relevante, pero no podemos contar con que todos los usuarios hayan utilizado esas preferencias. Por ello, es importante entregarle a las personas la opción en cualquier interfaz para que pausen o cancelen el movimiento de la animación.

En resumen intenta seguir los estándar de la WCAG, capta la atención de los usuarios y no sobrecargues tu sitio o interfaz con animaciones. Es importante entregarles diversas opciones y que sean ellos quienes decidan. 

Tomando en cuenta estos puntos, nos estaremos enfocando en hacer un sitio web, interfaz o aplicación más accesible y que llegue a una cantidad más amplia de usuarios.

Acerca del Autor

Antonia Cerda - Diseñadora UX/UI

Diseñadora en constante aprendizaje, organizada, proactiva, creativa y empática. El éxito de un producto o servicio digital depende principalmente, de lo óptima que sea la experiencia de usuario que ofrece. Esto debe ser el eje articulador de cualquier proceso de diseño.

Agregar un comentario