Unlimited WordPress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Accessibility

Una guía para crear animaciones accesibles

Read Time: 9 mins

Spanish (Español) translation by Carlos (you can also view the original English article)

Las interfaces animadas pueden provocar dolores de cabeza, náuseas, mareos y otros problemas de salud para muchas personas. Los grupos más afectados son las personas con trastornos vestibulares, epilepsia y susceptibilidades a la migraña. No obstante, cualquiera puede experimentar problemas similares si es sometido a un movimiento excesivo en la pantalla durante un período de tiempo más largo.

En esta guía, compartiré un par de las mejores prácticas para satisfacer las necesidades de los usuarios que literalmente se «enferman» con tus animaciones.

Día Internacional de las Personas con Discapacidad

La fecha de publicación de este artículo no es casualidad: el 3 de diciembre es el Día Internacional de las Personas con Discapacidad de las Naciones Unidas. Hoy nos gustaría crear conciencia y demostrar lo que podemos hacer con un diseño web inclusivo.

Efectos secundarios de las animaciones

El sistema vestibular incluye partes del oído interno y el cerebro, responsables del procesamiento de la información sensorial y la orientación espacial. Las personas con trastornos vestibulares experimentan síntomas como mareos, problemas de equilibrio, mareos crónicos, dolores de cabeza y náuseas cuando miran movimientos a gran escala en la pantalla.

Pero, ¿qué tan comunes son estos problemas? De acuerdo con Vestibular.org, muy. Los investigadores estiman que:

«... hasta el 35 por ciento de los adultos de 40 años o más en los Estados Unidos (aproximadamente 69 millones de estadounidenses) han experimentado alguna forma de disfunción vestibular» - Vestibular.org

Las animaciones intermitentes y parpadeantes también pueden desencadenar convulsiones en personas con epilepsia fotosensible.

Esto ciertamente no significa que no puedas utilizar animaciones si cuidas la accesibilidad. Veamos algunas de las mejores prácticas que puedes implementar para satisfacer las necesidades de los usuarios que experimentan problemas con las interfaces animadas.

1. Considera el tamaño relativo del movimiento a la ventana gráfica

Los pequeños elementos animados, como un botón que cambia ligeramente de color al pasar el mouse, no serán un gran problema. Las animaciones que cubren una amplia área de la pantalla son los verdaderos agresores de los que debes tener cuidado. Al diseñar una animación, siempre piensa en el tamaño relativo del movimiento de la pantalla.

Cuanto mayor sea esta relación, más personas serán afectadas por la animación. Esta regla también se aplica a las interfaces móviles. Una animación que se ve relativamente pequeña en el escritorio puede cubrir la mitad de la pantalla en un dispositivo móvil.

2. Ten cuidado con el desplazamiento de paralaje

El concepto de desplazamiento de paralaje (y su problema inherente) es que el primer plano y el fondo se mueven a una velocidad diferente. Cuando se hace drásticamente, el desplazamiento de paralaje es un buen ejemplo de animación a gran escala que puede causar los síntomas mencionados anteriormente. Aún puedes utilizar efectos de paralaje sutiles si lo deseas, pero hay una serie de comportamientos que debes evitar por cualquier medio.

Ante todo «Scrolljacking». Esto es cuando la barra de desplazamiento se manipula para comportarse independientemente de los esfuerzos e intenciones del usuario. No es una buena experiencia para comenzar. Pero, cuando se combina con el desplazamiento de paralaje, el fondo animado comienza a moverse a su propia velocidad y su sitio web se vuelve básicamente inutilizable para personas con trastornos vestibulares.

Asimismo, evita el desplazamiento horizontal cuando utilices efectos de paralaje. El desplazamiento horizontal en un sitio web es una sorpresa para la mayoría de los usuarios y no siempre es agradable. Como regla general, siempre piensa cuidadosamente sobre los movimientos sorpresivos en la pantalla: tienden a hacer que las personas con problemas de equilibrio pierdan la dirección y surjan los síntomas.

3. Permite el control de sliders y carruseles

Los sliders sin controles para su reproducción, detención y pausa son un problema para cualquiera que esté realmente interesado en el contenido del slider (que probablemente no sean muchas personas). Según el excelente análisis «Los sliders son desagradables» de Yoast SEO, solo el 1% de los usuarios hace clic en los sliders, pero aún así deberías pensar en ellos. Incluso si las personas con trastornos vestibulares y de otro tipo se encuentran en el 99% que no les importa el slider en absoluto, mover constantemente las diapositivas los enfermará.

Siempre proporciona más de una manera para que los usuarios detengan, pausen y reinicien tu slider o carrusel. Existen varias técnicas que puedes usar, como:

  • Iconos para las flechas izquierda y derecha para permitir que el usuario mueva las diapositivas.
  • Una miniatura donde se pueda hacer clic de cada diapositiva debajo del slider.
  • Iconos (por lo general puntos más grandes): uno para cada diapositiva.
  • Iconos tradicionales de reproducción, detención y pausa debajo del slider, igual a los utilizados en los reproductores multimedia

Asimismo, evita los efectos animados en las diapositivas. Las animaciones dentro de las animaciones son súper perturbadoras para la experiencia del usuario y dañan severamente la accesibilidad (lo mismo ocurre con las animaciones en sitios con paralajes: un no definitivo).

Además de los sliders, el criterio de éxito 2.2.2 de WCAG 2.0 también recomienda ofrecer controles de pausa / detención / ocultar para cualquier información de actualización automática que:

  1. Inicie automáticamente
  2. Sea presentada en paralelo con otro contenido.

4. Especifica la duración de las animaciones

Las animaciones que aparecen demasiado rápido también pueden ser problemáticas para los usuarios con necesidades de accesibilidad (y probablemente para cualquiera que quiera procesar la información presentada). Por suerte, CSS nos permite controlar la duración de las animaciones y transiciones.

Para ajustar los límites de tiempo, puede utilizar las propiedades animation-duration y transition-duration. Su uso es bastante fácil. Por ejemplo, el siguiente código aporta 2 segundos para completar una animación de transición:

O, lo mismo con la propiedad resumida transition:

La duración ideal del tiempo depende del tamaño relativo de la animación en la pantalla. Lo que está bien para una animación más pequeña podría ser demasiado rápido para una animación más grande. Además, puede ser una buena idea utilizar diferentes duraciones para diferentes tamaños de ventanas gráficas.

Recuento de repeticiones

También puedes definir el número de veces que se reproduce un ciclo de animación. Esta función solo está disponible para animaciones clave, ya que las transiciones no se enlazan; corren solo una vez. Puedes utilizar la propiedad animation-iteration-count de la siguiente forma:

Puedes establecer infinite como el valor para animation-iteration-count, no obstante, los bucles infinitos no son muy buenos para la accesibilidad. Especialmente, si no ofreces a los usuarios ninguna manera para detener o pausar la animación cuando lo decidan.

5. Utiliza videos HTML en lugar de GIF animados

Los GIF animados son extremadamente populares en estos días; los sitios web los utilizan todo el tiempo. Sin embargo, su impacto en la accesibilidad casi nunca es cuestionado y en realidad es bastante inquietante. Los problemas de accesibilidad se vuelven especialmente desagradables cuando un sitio web utiliza varios GIF animados en la misma página. Solo piensa en los artículos de tipo lista en los que cada elemento está decorado con una animación GIF separada, que se mueven en todo tipo de direcciones impredecibles.

Para ser exactos, los problemas con los GIF animados son la reproducción automática, el bucle infinito y la falta de control para el usuario. Los desarrolladores de Google también mencionan problemas de rendimiento (los GIF animados pueden ser realmente enormes, como 13.7 MB en el ejemplo analizado). Una de las posibles soluciones es reemplazarlos con videos HTML que funcionan de manera nativa en todos los navegadores modernos.

Hay varias herramientas (por ejemplo, FFmpeg) que puedes utilizar para convertir GIF animados a diferentes formatos de video. La etiqueta <video> de HTML5 te permite definir múltiples fuentes para integrar video. Puede utilizar tres formatos de video: MP4, WebM y Ogg. MP4 tiene el mejor soporte para navegadores, sin embargo, WebM es algo más pequeño en tamaño.

Navegador MP4 WebM Ogg
Internet Explorer No No
Google Chrome


Firefox


Safari
No No
Opera Sí (25+)

Por ejemplo, después de convertir un GIF animado a formatos MP4 y WebM, puedes utilizar el siguiente HTML:

Al utilizar videos HTML en vez de GIF animados, facilitas a los usuarios para detener o pausar la animación u optar por no verla. Adicionalmente, mejoras significativamente el tiempo de carga de la página, que también es una métrica importante de accesibilidad, especialmente para los usuarios móviles y las personas en áreas de baja conectividad.

Imgur y Gfycat también utilizan videos HTML5 para mostrar GIF animados en sus sitios web (puedes probarlo con las herramientas de desarrollo de tu navegador). Por tanto, la técnica ya está ampliamente probada en producción.

6. Utiliza JavaScript para prevenir la reproducción automática de los archivos GIF

Como una alternativa a la etiqueta <video>, también podrías utilizar JavaScript para prevenir la reproducción automática de los GIF animados. En este momento, la mejor opción, en mi opinión, en una pequeña biblioteca de JavaScript llamada Gifffer creada por Krasimir Tsonev. Es bastante sencilla para utilizar y no tienes que convertir tus animaciones a videos. Necesitas seguir tres pasos simples para usar Gifffer en tu sitio web:

  1. Añade la biblioteca a tu página web utilizando la etiqueta <script>..
  2. Usa el atributo data-gifffer en lugar de src en tu imagen gif.
  3. Llama a Gifffer () cuando lo requieras.

Aquí hay una demostración (gracias a Patakk por la animación) que expone cómo funciona Gifffer:

Ten en cuenta el uso de data-gifffer-alt en vez del atributo alt para apoyar a usuarios de lectores de pantalla. Además, puedes utilizar tres atributos de data-* opcionales si lo requieres:

  1. data-gifffer-width en píxeles o porcentaje.
  2. data-gifffer-height en píxeles o porcentaje.
  3. data-gifffer-duration en milisegundos

Echa un vistazo a más ejemplos de código en la página GitHub de Gifffer.

En conclusión

Los trastornos vestibulares, la epilepsia y las sensibilidades a la migraña no son lo primero en lo que pensamos cuando hablamos de accesibilidad. No obstante, afectan a muchos usuarios, por lo que prestar atención a la accesibilidad de la animación es tan importante como otros aspectos de la accesibilidad.

No existen muchos artículos que aborden estos problemas. Val Head fue el primero que trató el tema en profundidad en A List Apart con dos excelentes artículos:

  1. Diseñando una animación web más segura para la sensibilidad al movimiento
  2. Más recursos sobre animaciones accesibles

Asegúrate de revisarlos, especialmente el primero, ya que muestra un par de ejemplos de mal diseño de animación que realmente te marearán. Allison Ravenhall también discutió la accesibilidad de los GIF animados recientemente en Smashing Magazine. Y, para leer más en Tutsplus, echa un vistazo a mi artículo previo sobre accesibilidad del teclado, que también es un tema bastante desatendido.

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.