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:

Si quieres conocer otros artículos parecidos a Pausar un GIF con detalles/resumen puedes visitar la categoría Tutoriales.