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.

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

Vídeos relacionados:

• 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