Pausar un GIF con detalles/resumen

Steve Faulkner tiene una idea inteligente aquí. Puede mostrar un GIF (animado) y superponer un botón de pausa/reproducción encima, que en realidad es un elemento details/ . summaryCuando se activa, un JPG (no animado) en el interior cubre el GIF, "deteniéndolo" efectivamente.

Adrian Roselli lo llama una forma “rápida y sucia” de pasar el Criterio de Éxito 2.2.2 de las WCAG: Pausar, Detener, Ocultar.

Lo bifurqué, cambié todas las imágenes para que mostrara primero el JPG y puse loading="lazy"las imágenes. Parece que efectivamente no carga el GIF hasta que presionas explícitamente reproducir, por lo que esa también es una opción:

SUSCRÍBETE A NUESTRO BOLETÍN 
No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.
Al suscribirte, aceptas nuestra política de privacidad y nuestros términos de servicio.

Tal vez te puede interesar:

  1. La innovación no puede mantener la Web rápida
  2. Rendimiento web ultrarrápido
  3. Tabla de contenidos fijos con estados activos de desplazamiento
  4. “cambiar tamaño: ninguno;” en áreas de texto es una mala experiencia de usuario

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Este sitio web utiliza cookies para mejorar tu experiencia mientras navegas por él. Este sitio web utiliza cookies para mejorar tu experiencia de usuario. Al continuar navegando, aceptas su uso. Mas informacion