Animación web accesible: explicación de las WCAG sobre animación

Es cierto, ¡la animación web puede ser accesible! A veces sólo hace falta un poco de esfuerzo extra para asegurarse de que así sea. Hay cosas estratégicas que podemos hacer para asegurarnos de que nuestras animaciones tengan un impacto positivo en la accesibilidad, como planificar cómo contribuyen a la UX general y la facilidad de uso de nuestro sitio. También hay más consideraciones tácticas para garantizar que las animaciones de nuestro sitio sean accesibles, y ahí es donde entran las Pautas de Accesibilidad al Contenido Web (WCAG).

Si bien los diferentes contextos pueden afectar los detalles de lo que debe hacer, las WCAG brindan una serie de recomendaciones para interacciones y contenido animado. Estos incluyen pautas sobre cuándo proporcionar controles de pausa y reproducción, límites para el parpadeo o parpadeo de la pantalla y consejos sobre cuándo brindar opciones de movimiento reducido para usuarios con sensibilidad al movimiento. Si no lo ha visto por un tiempo, la especificación se actualizó a la versión 2.1 y ahora tiene una guía aún más útil sobre cómo podemos diseñar animaciones web que sean accesibles.

Profundicemos en cada una de esas recomendaciones con más detalle para ver cómo podemos aplicarlas a nuestro trabajo en la web:

Pausar, detener, ocultar

La primera de las recomendaciones WCAG que se aplica específicamente a la animación es Pausar, Detener, Ocultar. En este caso, el título da una pista bastante importante sobre de qué se trata la recomendación. Afirma:

Para cualquier información en movimiento, parpadeante o de desplazamiento que (1) se inicia automáticamente, (2) dura más de cinco segundos y (3) se presenta en paralelo con otro contenido, existe un mecanismo para que el usuario pausa, detiene u oculta. a menos que el movimiento, el parpadeo o el desplazamiento formen parte de una actividad en la que sea esencial; […]

La recomendación se aplica específicamente al movimiento iniciado por la página web sin interacción del usuario, y al principio puede parecer algo que no se aplica al trabajo de animación de la interfaz de usuario. La mayoría de las duraciones que podríamos usar en el trabajo de animación de la interfaz de usuario están muy por debajo de este umbral de cinco segundos individualmente. Pero hay algunos patrones comunes en los que esto se aplicaría. Por ejemplo: carruseles o presentaciones de diapositivas de avance automático, fondos animados o ilustraciones animadas. Si bien cada animación individual dentro de estos patrones puede ser muy corta, el movimiento general que se crea a menudo se desarrolla durante más de cinco segundos. Esto es especialmente cierto cuando están diseñados para reproducirse en un bucle infinito, que definitivamente dura más de cinco segundos.

Cómo cumplir con los criterios de pausar, detener y ocultar

Si tiene algunas de estas animaciones de reproducción más largas, deberá agregar algún tipo de control de pausa y reproducción que permita a los usuarios controlar el movimiento y/o el comportamiento de reproducción automática. Sin embargo, la especificación WCAG no dicta cómo deben verse estos controles, usted tiene control total del diseño sobre eso.

Un buen ejemplo de esto en la práctica es cómo la serie de artículos "Dark Side of The Grid" maneja las animaciones de ejemplo. Cada figura animada se repite infinitamente una vez que comienza, por lo que proporcionan un botón de reproducción/detención para que los lectores reproduzcan la animación cuando quieran verla y la detengan cuando hayan terminado. Otras animaciones más decorativas o ilustrativas del artículo se reproducen una vez y luego presentan un botón para reproducirlas, si los usuarios así lo desean. La colocación y el diseño de los botones también se ajustan a la estética del diseño general del artículo, lo que los hace funcionales y estéticamente agradables.

Los GIF animados también son algo a tener en cuenta. Si tienes un GIF animado en bucle, necesitarás algún tipo de control de pausa/reproducción para cumplir con éxito este criterio. Ambas técnicas mencionadas en esta publicación son útiles para lograrlo.

Existen algunas excepciones para esta recomendación, como lo señala el WCAG. Una excepción que vale la pena mencionar específicamente son los cargadores y precargadores.

Tres destellos o por debajo del umbral

Esta recomendación es una de las que probablemente cuenta con más investigaciones porque proviene de la época de la televisión abierta. La razón principal detrás de esta recomendación es que se sabe que un parpadeo significativo en la pantalla provoca convulsiones.

Tres parpadeos breves o estados por debajo del umbral:

Las páginas web no contienen nada que parpadee más de tres veces en un período de un segundo, o que el parpadeo esté por debajo de los umbrales generales de parpadeo y parpadeo rojo.

Cómo cumplir con los criterios de tres destellos o por debajo del umbral

Las WCAG proporcionan detalles sobre los umbrales de tamaño, relación y ángulo de visión bajo los cuales hacer parpadear la pantalla podría considerarse seguro. Pero para la mayoría de nosotros, probablemente sea más fácil evitar cualquier cosa que parpadee más de tres veces en un segundo. No creo que muchos diseñadores de UX se propongan mostrar la pantalla excesivamente a propósito, pero puede suceder. Por ejemplo, un diseño que busca una sensación de videojuego o una vibra con fallas podría implicar que la pantalla parpadee con más frecuencia que tres veces por segundo.

Un ejemplo específico de un diseño que incluye una cantidad significativa de tapajuntas es este artículo del Huffington Post, que se muestra a continuación. Es una pieza muy estilizada sobre cómo los millennials tienen más dificultades que las generaciones anteriores en cosas como el empleo y el ahorro para la jubilación. Su diseño de videojuego de 8 bits con fallas va muy en línea con el tema del artículo. En cuanto al diseño, es una excelente elección para el tema y está bien ejecutada. Pero hay ocasiones, como se puede ver en las imágenes fijas cuadro por cuadro a continuación, en las que el color del texto parpadea más de tres veces por segundo.

Esta cantidad de destellos podría ser problemática para personas con epilepsia u otras reacciones físicas provocadas por los destellos. Hay que reconocer que el Huffington Post también proporcionó una versión de solo texto del artículo para cualquier persona sensible a los flashes, como menciona Eileen en esta publicación, así como una advertencia anticipada sobre el posible peligro de los flashes.

En general, evitar efectos que requieran flasheos frecuentes es la forma más segura de cumplir este criterio. Sin embargo, si no puede evitar mostrar animaciones en su proyecto, las WCAG proporcionan instrucciones detalladas sobre los umbrales seguros para mostrar la pantalla. Además, también es una buena opción proporcionar advertencias avanzadas sobre contenido parpadeante y una versión alternativa del contenido sin el efecto parpadeante (como en el ejemplo anterior).

Los niveles A, AA y AAA de las WCAG

Las WCAG tienen múltiples niveles de criterios y conformidad, por lo que cada recomendación tiene una notación del nivel al que pertenece. El cumplimiento del nivel A es el nivel mínimo de conformidad. El nivel AA es el nivel medio de conformidad e indica que se han cumplido los criterios tanto para el nivel A como para el AA. El nivel AAA es el nivel más alto de conformidad y requiere satisfacer los criterios del nivel A, AA y AAA. Normalmente, las directrices que se encuentran en el nivel AAA requieren un esfuerzo adicional para cumplirlas. (Si desea obtener más información sobre estos niveles y lo que se incluye en ellos fuera de las recomendaciones relacionadas con la animación que cubrimos aquí, he reunido una lista de recursos útiles al final de este artículo).

En general, la mayoría de las personas apuntan al cumplimiento del nivel AA cuando dicen que están creando un sitio web accesible. Este es también el nivel que podría ver solicitado en una RFP o en un resumen del proyecto. Las dos últimas pautas que analizamos se incluyen en los criterios del nivel AA y, por lo tanto, deben cumplirse para reclamar el cumplimiento del nivel AA. La siguiente pauta, sin embargo, forma parte de los criterios de nivel AAA. Aunque está fuera del nivel típico de conformidad, es una recomendación muy útil a tener en cuenta si su proyecto depende significativamente de la animación. Recomiendo encarecidamente implementarlo en su trabajo.

Animación a partir de interacciones.

Esta guía cubre un tipo de animación diferente a las dos anteriores. Mientras que los dos primeros generalmente se aplican a la animación iniciada por la propia página web, este se aplica a la animación iniciada por la interacción del usuario. Más específicamente, afirma:

La animación de movimiento desencadenada por la interacción se puede desactivar, a menos que la animación sea esencial para la funcionalidad o la información que se transmite.

A primera vista, el término "animación en movimiento" puede resultar confuso, ya que normalmente utilizamos los términos "movimiento" y "animación" indistintamente. Puede parecer demasiado específico al principio, pero tiene sentido ser específico en este caso. Las WCAG definen la animación en movimiento como la animación que se utiliza para "crear la ilusión de movimiento" y especifica que "la animación en movimiento no incluye cambios de color, desenfoque u opacidad".

Básicamente, el término animación en movimiento se utiliza para indicar que ciertos tipos de animación crean la sensación de movimiento, mientras que otros no. Son esas animaciones las que crean una sensación de movimiento lo que concierne a esta directriz. Es importante tener en cuenta esa distinción cuando se habla de animación y accesibilidad para asegurarse de centrar sus esfuerzos de manera eficiente. Si tuviéramos que expresar esta distinción en un diagrama de Venn muy parecido a un globo ocular, se vería así:

En los últimos años, nos hemos dado cuenta de que algunos tipos de movimiento en la pantalla, incluso como parte de una interfaz, pueden hacer que las personas con sensibilidad al movimiento enfermen físicamente. Por eso es posible que deseemos considerar la creación de un modo de movimiento reducido en nuestro trabajo. Escribí más sobre los tipos de efectos de movimiento que es más probable que se activen en este artículo, y esta publicación del blog WebKit cubre algunos ejemplos en detalle.

Cómo cumplir con la animación a partir de criterios de interacciones.

Las WCAG sugieren que evitemos animaciones innecesarias, proporcionemos un control para que los usuarios desactiven cualquier movimiento no esencial o aprovechemos la configuración de movimiento reducido en los sistemas operativos y agentes de usuario. Veamos cada uno de estos con un poco más de detalle. Hay algunas cosas diferentes que podemos hacer para ayudar a evitar exponer a las personas a animaciones que puedan provocarles mareos, náuseas o algo peor.

Evite animaciones innecesarias

El contexto y las expectativas también juegan un papel aquí. La cantidad de movimiento que razonablemente podría esperar encontrar en un sitio web para una película o un videojuego es muy diferente de lo que razonablemente podría esperar encontrar en, por ejemplo, un sitio gubernamental o el sitio de una empresa de construcción. Los mismos efectos sorprendentes que podrían encajar perfectamente en el sitio de un videojuego se sentirían innecesarios o fuera de lugar, por ejemplo, en un sitio web gubernamental. Considere el contexto y las expectativas que se aplican a su sitio y si la cantidad de animación que está utilizando en su diseño se ajusta a ese contexto.

Proporcionar una forma para que los usuarios desactiven animaciones de movimiento potencialmente problemáticas.

Si tiene movimiento en su producto que podría ser un desencadenante para personas con sensibilidad al movimiento, lo más responsable es proporcionar una forma para que los usuarios eviten esas animaciones activas. Según la definición de las WCAG, cualquier efecto que pueda considerarse animación en movimiento debe incluir una versión reducida.

Los efectos de paralaje son un buen ejemplo. Según mi propia investigación, son universalmente problemáticos para las personas con sensibilidad al movimiento, pero también sigue siendo una técnica muy popular. Si bien no sería realista pedir el fin de todos los efectos de paralaje por completo, implementar el paralaje de manera responsable requiere brindar a los usuarios cierto nivel de control para desactivar ese movimiento desencadenante.

Por lo general, esto se interpreta como que incluye una opción, configuración o preferencia para que los usuarios indiquen su preferencia por el movimiento reducido y que proporcionen versiones reducidas de esos efectos de animación de movimiento cuando se activa. El sitio Netlify 1 Million Devs es un ejemplo de cambio de movimiento en acción, y el sitio oficial de Animal Crossing también tiene uno.

Aprovecha la función de reducción de movimiento

Los sitios o aplicaciones que no dependen en gran medida de grandes cantidades de movimiento pueden encontrar que un cambio personalizado no es la estrategia adecuada para ellos y, en su lugar, utilizan la prefers-reduced-motionconsulta de medios por sí sola. Esto le permite proporcionar una versión reducida de contenido muy animado cuando esa preferencia está presente globalmente a través del sistema operativo del usuario. También es una configuración que pueden establecer en un lugar y hacer que afecte una variedad de contenidos que encuentran. Eso lo convierte en una gran herramienta que podemos utilizar para detectar y responder a la necesidad de un usuario de reducir el movimiento.

He escrito sobre su uso prefers-reduced-motionen detalle en Smashing Magazine y también lo he cubierto en otros artículos de este sitio. En resumen, nos permite acceder a la preferencia de movimiento a nivel del sistema operativo de alguien a través de una consulta de medios. Podemos acceder a él en CSS o JavaScript y usar el valor devuelto para proporcionar una experiencia de movimiento reducido para quienes la deseen. Por ejemplo, podríamos hacer esto para crear una variación de movimiento reducido de una animación CSS que rebota:

/* A constant bouncing motion effect applied to the title */h2 {  animation: bouncing 1.5s linear infinite alternate;}/* Replace it with a safer effect when prefers-reduced-motion returns true */@media (prefers-reduced-motion: reduce) {  h2 {    animation: fade 0.5s ease-in both;  }}

Algunos sitios optan por utilizar simultáneamente un interruptor personalizado y preferencias de movimiento reducido. Si va al sitio con movimiento reducido solicitado en la configuración de su sistema operativo, automáticamente obtendrá el modo de movimiento reducido. Este enfoque doble es una gran estrategia para sitios con mucho movimiento. Marcy Sutton cubre los conceptos básicos de cómo configurar este enfoque en su curso egghead.io, así como en esta demostración de CodePen.

Utilice estas pautas para su próximo proyecto de animación

Ahí lo tienes, todo lo que dice la WCAG sobre animación explicado en un solo lugar. Espero que este artículo le ayude a hacer accesible su trabajo de animación web con confianza. A veces requiere un poco de esfuerzo adicional, pero ese esfuerzo adicional vale la pena cuando significa que ha ampliado la cantidad de personas que pueden interactuar de manera significativa con su sitio.

Este artículo se centró en las recomendaciones específicas para la animación, pero la animación no es el único lugar en nuestro trabajo donde las consideraciones de accesibilidad pueden tener un gran impacto. Existen excelentes recursos sobre accesibilidad que cubren una visión más holística de la accesibilidad. Uno de mis favoritos es el libro Accesibilidad para todos de Lara Kalbag. Sitios como WebAIM y el Proyecto A11y son excelentes para consultar en busca de una gran cantidad de recursos. Si realiza gran parte de su trabajo de animación con SVG, el artículo sobre accesibilidad de SVG de Heather también es un buen recurso. Le recomiendo encarecidamente que consulte estos recursos si aún no lo ha hecho.