Vídeo: Animaciones desde interacciones que respeten las preferencias de las personas. Ejemplo práctico de prefers-reduced-motion

Ir al vídeo en YouTube: "Animaciones desde interacciones que respeten las preferencias de las personas" (con subtítulos y transcripción)

El otro día estuve analizando varias páginas web con animaciones. No estaba interactuando con ellas continuamente ni las tenía en primer plano. Simplemente estaban abiertas en una segunda pantalla y las percibía de reojo mientras trabajaba en la documentación.

Al cabo de un rato empecé a notar malestar y hasta náusea solo por tener ese movimiento constante en mi visión periférica. Así que empecé a pensar en grabar el vídeo que os comparto hoy para concienciar sobre este tema y mostrar soluciones sencillas de implementar.

Las animaciones son recursos habituales en los sitios web, animaciones que implican movimiento, desplazamiento o zoom, animaciones que a muchas personas provocan diversos efectos adversos como malestar, mareo, naúsea o distracción, entre otros.

Una animación a pantalla completa que consideras impactante puede generar un impacto, pero un impacto indeseado en la salud de otra persona, que seguramente no es lo que deseabas.

Pero la accesibilidad no consiste en quitar experiencias, no limita tu creatividad o tu diseño. La accesibilidad consiste en permitir que cada persona pueda adaptarlas a sus necesidades, preferencias y contexto de acceso, como explico en el vídeo que os comparto.

Al final decidí centrar el vídeo solo en las animaciones desde interacciones por una razón: el criterio 2.3.3 Animation from Interactions no es obligatorio por ley y quiero animar a cumplirlo.

Mi objetivo es divulgar el uso de la media query prefers-reduced-motion y animar a los diseñadores y desarrolladores a implementar dos sencillas técnicas que permiten respetar las preferencias de las personas sobre las animaciones.

En este vídeo hablo de:

• Qué son las animaciones desde (o por) interacciones.
• Personas a las que afectan y los efectos adversos.
• Criterio 2.3.3 AAA de las WCAG.
• Ejemplo práctico de cumplimiento mediante dos técnicas: prefers-reduced-motion y botón manual.
• Recomendaciones adicionales.

Artículos relacionados

• Scrolljacking y Parallax Scrolling en accesibilidad web. Peligro para personas con desordenes vestibulares, epilepsia y migrañas

Servicios relacionados

¿Necesitas una explicación detallada y práctica de todos los criterios de las WCAG o de aquellos que aplican a un determinado perfil profesional? Formación a medida en accesibiliddad digital

Otros vídeos

• Seminarios y webinars:
  • "La European Accessibility Act (EAA) de forma sencilla", a11yConf 2025
  • Ponencia "Documentos accesibles. Cómo mejorar la accesibilidad de tus documentos de forma sencilla", IX Seminario GATE "Accesibilidad digital en educación" en la Universidad Politécnica de Madrid (UPM), 2024
  • Novedades de las WCAG 2.2, en el webinar "¿Quieres conocer las últimas novedades en materia de accesibilidad digital?", 2024
• Talleres:
  • Taller "Revisión de accesibilidad de una página web" de Olga Carreras en la Semana de la Accesibilidad Digital 2022 de la Universidad de Alicante
  • Taller "PDF accesibles con Adobe Acrobat Profesional" (vídeo de Yotube)de Olga Carreras en el I Congreso Latinoamericano de Accesibilidad y Usabilidad, 2022.
• Mesas redondas:
  • "Preparados para un mundo más accesible" en Next Digital, 2024
  • La web accesible, es web para todos" en EXPO+ACCESIBLE, 2024
• Vídeos para el curso "Curso online en Desarrollo Web" de Google & IEI de la Universidad de Alicante (programa Google Actívate), y el MOOC de la Universidad de Alicante: "iDESWEB: Introducción al desarrollo web", 2014
• Vídeos para el curso gratuito "Aprende Accesibilidad Web paso a paso" de la Cátedra Telefónica - Universidad de Alicante, 2015
• Otros vídeos:
  • PDF accesible. PDF correctamente etiquetado desde inDesign , 2013

Migrañas y accesibilidad digital: consideraciones de diseño y desarrollo

Las cefaleas tensionales afectan al 70% de la población, las migrañas al 12-15% y la cefalea en racimos al 3%.

John Jameson, Digital Accessibility Developer de Princeton, examina los desencadenantes y sensibilidades comunes de la migraña, describe los cambios que se pueden realizar en el hogar y analiza las consideraciones de diseño y desarrollo digital, como:

• Evita los parpadeos o el contenido en movimiento.
• Evita los vídeos o animaciones con reproducción automática e incluye siempre un botón de pausa.
• Respeta la preferencia de movimiento reducido (prefers-reduced-motion) que se utiliza para detectar si un usuario ha habilitado una configuración en su dispositivo para minimizar la cantidad de movimiento no esencial .
• Evita los pattern glare o los patrones apretados y repetitivos de líneas y formas geométricas.
• Evita el contraste absoluto blanco / negro (ayuda también al 28% de las personas con astigmatismo) u otras combinaciones, como rojo sobre verde.
• Las personas pueden estar usando filtros de color o brillo muy bajo, de forma preventiva, lo cual reducirá drásticamente el contraste, así que intenta alcanzar ratios altos de contraste y no distingas los elementos solo por el color.
• El sonido también es un desencadenante, por lo que también se benefician de criterios de conformidad como el 1.4.7 (sonido de fondo bajo), o del uso de subtítulos y transcripciones.
• La niebla mental también es común, por lo que se benefician de todas las medidas para hacer el contenido más sencillo y comprensible.

Acceso al vídeo y a la presentación

Artículo relacionado: Scrolljacking y Parallax Scrolling en accesibilidad web. Peligro para personas con desordenes vestibulares, epilepsia y migrañas

Scrolljacking y Parallax Scrolling en accesibilidad web. Peligro para personas con desordenes vestibulares, epilepsia y migrañas

Las WCAG 2.1 han incluido un nuevo criterio de conformidad (2.3.3 Animation from Interactions, AAA) que trata el peligro de animaciones como el Scrolljacking y Parallax Scrolling para las personas con desordenes vestibulares, epilepsia y migrañas, y obligará a poder deshabilitar este tipo de animaciones.

Me ha parecido importante darle visibilidad a este problema porque seguramente es desconocido por muchos diseñadores, y porque la accesibilidad de estos componentes suele abordarse desde un punto de vista puramente técnico de implementación de código.

Más información sobre el criterio 2.3.3 de las WCAG 2.1

¿Qué son los desordenes vestibulares?

El sistema vestibular incluye las partes del oído interno y del cerebro que ayudan a controlar el equilibrio y los movimientos oculares. Cuando una enfermedad, el envejecimiento o una lesión daña este sistema, se puede desarrollar un desorden vestibular.

Las animaciones de contenido en movimiento o rotando, no solo provocan distracción en muchas personas, a las que les cuesta concentrarse en la lectura del contenido, también pueden provocar en las personas con desordenes vestibulares mareos, náuseas y dolores de cabeza. Además, sus síntomas pueden perdurar bastante después de finalizada la animación.

Por otra parte, en personas con epilepsia o propensión a las migrañas, puede ser un desencadenante.

Más información sobre el desorden vestibular.

¿Qué tipo de animaciones son peligrosas?

En mi opinión, el mejor artículo sobre el tema es de Val Head, publicado en A List Apart en 2015: Designing Safer Web Animation For Motion Sensitivity, al que me remito y os resumo brevemente.

Por hacernos una idea, señala que en EEUU, aproximadamente, 8 millones de adultos reportan un problema crónico con el equilibrio, mientras que otros 2,4 millones reportan un problema crónico con mareos.

La autora del artículo se entrevistó con dos personas con trastornos vestibulares y pone ejemplos concretos de animaciones y efectos problemáticos.

Entre sus conclusiones destacan:

• Una animación más grande es más propensa a desencadenar una respuesta negativa.
• El tamaño físico de la pantalla importa menos que el tamaño del movimiento en relación con el espacio disponible en pantalla. Un botón pequeño con rotación 3D probablemente no causará problemas.
• Las animaciones que no implican movimiento (rotación, deslizamiento o reescalado de contenido en primer plano), sino que solo implican propiedades como color u opacidad es poco probable que sean problemáticas.
• Las animaciones exageradas de scrolljacking y parallax scrolling son muy propensas a desencadenar una respuesta negativa, porque la mayor parte del tiempo estos efectos implican objetos de fondo que se mueven a velocidad diferente que los objetos de primer plano, a veces drásticamente.
• Las animaciones que se mueven en una dirección (o a una velocidad) diferente a la dirección en la cual el usuario está escrolando también son problemáticas.
• La cantidad de distancia espacial cubierta por una animación también es un factor importante. Por ejemplo, las transiciones de zoom 3D de iOS7 causaron problemas debido a la cantidad de espacio cubierto rápidamente.

Val Head destaca también los aspectos positivos que puede tener ofrecer una animación, pero hay que diseñarla de manera más segura. Ella propone:

• la decisión de incluirla debe obedecer a un propósito claro,
• se debe informar al usuario previamente,
• el usuario debería poder deshabilitarla,
• y debería abordarse también el problema desde la perceptiva de las opciones de los navegadores web.

Una de las personas con la que se entrevistó para este artículo es Greg Tarnoff, consultor de accesibilidad que experimenta vértigo y migrañas. Greg tiene un vídeo de 1 hora de duración en el cual explica toda la problemática y se ven ejemplos de webs:

Enlace YouTube: Infinite Canvas 6: Vestibular Disorders and Accessible Animation

Más ejemplos de animaciones problemáticas en:

• Scrolljacking and Accessibility: Are we Breaking the Web? , Shaumik Daityri
• "Evidences" en Animation caused by user interaction, W3C

Artículos relacionados:

• Cómo evitar causar ataques fotosensitivos de epilepsia. Herramientas de validación.