Pausar un GIF con detalles / resumen | Programar Plus

Steve Faulkner tiene una idea inteligente aquí. Puede mostrar un GIF (animado) y superponer un botón de pausa / reproducción encima, que es realmente un <details>/<summary> elemento. Cuando se alterna, un JPG (no animado) en el interior cubre el GIF, efectivamente “pausándolo”.

Adrián Roselli lo llama una forma “rápida y sucia” de pasar el Criterio de Conformidad WCAG 2.2.2 Pausar, Detener, Esconderse.

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


(Visited 4 times, 1 visits today)