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, nauseas 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, por que 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:
No hay comentarios:
Publicar un comentario