Las interfaces animadas pueden causar 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 (perdida de equilibrio), epilepsia y migrañas. Sin embargo, cualquier persona puede experimentar problemas similares si se somete a un movimiento excesivo en la pantalla durante un período de tiempo más prolongado.
El sistema vestibular incluye partes del oído interno y del 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 al observar movimientos en la pantalla.
Las animaciones de parpadeo y parpadeo también pueden desencadenar convulsiones en personas con epilepsia fotosensible.
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 gran área de la pantalla son las que verdaderamente debes tener cuidado. Al diseñar una animación, siempre piense en el tamaño de la pantalla.
Cuanto mayor sea esta proporción, más personas se activarán con la animación. Esta regla también se aplica a las interfaces móviles. Una animación que parece relativamente pequeña en el escritorio puede cubrir la mitad de la pantalla en un dispositivo móviles.
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 piense cuidadosamente sobre los movimientos sorprendentes en la pantalla: tienden a hacer que las personas con problemas de equilibrio pierdan dirección y los síntomas aparezcan.
Los controles deslizantes (carrusel), presentan un problema para cualquiera que esté realmente interesado en el contenido del control deslizante (que probablemente no sea una gran multitud). De acuerdo con el excelente análisis "Sliders" de Yoast SEO, solo el 1% de los usuarios hace clic en los controles deslizantes
Siempre proporcione más de una forma para que los usuarios detengan, pausen y reinicien su deslizador o carrusel. Hay una serie de técnicas que puede utilizar, tales como:
• Iconos de flechas izquierda y derecha para permitir al usuario mover las diapositivas.
• Los iconos de reproducción, detención y pausa tradicionales debajo del control deslizante, similares a los utilizados en los reproductores multimedia.
Además, evita los efectos animados en las diapositivas. Las animaciones dentro de las animaciones son muy perturbadoras para la experiencia del usuario y dañan seriamente la accesibilidad.
Además de los controles deslizantes, el criterio de éxito 2.2.2 de WCAG 2.0 también recomienda proporcionar controles de pausa / detener / ocultar para cualquier información de actualización automática que:
• Se inicia automáticamente.
• Se presenta en paralelo con otros contenidos.
Las animaciones que ocurren 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). Afortunadamente, CSS permite controlar la duración de las animaciones y las transiciones.
Para configurar límites de tiempo, puede usar las propiedades animation-duration y transition-duration. Su uso es bastante sencillo. La duración ideal del tiempo depende del tamaño relativo de la animación a la pantalla. Lo que está bien para una animación más pequeña puede ser demasiado rápido para una animación más grande. También puede ser una buena idea usar diferentes duraciones para diferentes tamaños de vista. los bucles infinitos no son muy buenos para la accesibilidad. Especialmente, si no proporciona ninguna forma para que los usuarios detengan o detengan la animación cuando lo deseen.
Los GIF animados son extremadamente populares en nuestros días; Los sitios web los utilizan todo el tiempo. Sin embargo, su impacto en la accesibilidad casi nunca se cuestiona y en realidad es bastante perturbador. Los problemas de accesibilidad se vuelven especialmente desagradables cuando un sitio web utiliza varios GIF animados en la misma página. Una de las posibles soluciones es reemplazarlos con videos HTML que se ejecutan de forma nativa en todos los navegadores modernos. Hay una serie de herramientas (por ejemplo, FFmpeg, Gfycat, Imgur) que puede utilizar para convertir GIF animados en diferentes formatos de video.
Como alternativa a la <video>etiqueta, también puede usar JavaScript para evitar la reproducción automática de GIF animados. Actualmente, la mejor opción en mi opinión es una pequeña biblioteca de JavaScript llamada Gifffer creada por Krasimir Tsonev . Es bastante sencillo de usar y no tienes que convertir tus animaciones en videos
No hay comentarios:
Publicar un comentario