Técnica General G11 de WCAG 2.1: Crear contenido que parpadee menos de 5 segundos

En 1997, el episodio Dennō Senshi Porygon de Pokémon causó convulsiones en cientos de niños en Japón debido a una secuencia de luces parpadeantes en rojo y azul con una frecuencia de 12 Hz, lo que desencadenó casos de epilepsia fotosensible. Conocido como el «Pokémon Shock», este incidente llevó a la suspensión temporal del anime y a la implementación de regulaciones más estrictas sobre efectos visuales en la animación.

El contenido parpadeante puede ser una distracción significativa para los usuarios y, en algunos casos, puede afectar la experiencia de personas con discapacidades cognitivas o visuales. Además, el parpadeo continuo puede generar molestias e incluso problemas de accesibilidad para algunos usuarios.

La Técnica G11 de WCAG 2.1 ayuda a minimizar estas distracciones asegurando que cualquier contenido que parpadee lo haga por un máximo de 5 segundos. Esta práctica contribuye al cumplimiento del criterio de éxito 2.2.2 (Pausar, Detener, Ocultar) de WCAG 2.1.

Acerca de esta técnica

El objetivo de esta técnica es reducir el impacto negativo del contenido parpadeante, permitiendo que los usuarios se concentren en el resto del contenido sin distracciones innecesarias. El parpadeo prolongado o incontrolado puede ser molesto y, en algunos casos, podría afectar a usuarios con condiciones como epilepsia fotosensible.

¿Cuándo se debe aplicar esta técnica?

• Cuando se utilizan elementos animados que parpadean para resaltar información importante.
• Cuando se incluyen imágenes GIF animadas con efectos de parpadeo.
• Cuando se usa CSS o JavaScript para generar efectos intermitentes.
• Cuando se desarrollan anuncios o promociones con animaciones llamativas.

Ejemplos

Ejemplo incorrecto 1: Imagen GIF que parpadea indefinidamente

<img src="oferta.gif" alt="Descuento especial" style="animation: blink-animation 1s infinite;">
<style>
@keyframes blink-animation {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}
</style>

🔴 Problema:

• El parpadeo es infinito, lo que puede ser molesto y dificultar la lectura del contenido circundante.
• No cumple con el criterio 2.2.2 de WCAG 2.1.

Solución correcta: Detener el parpadeo después de 5 segundos

<img src="oferta.gif" alt="Descuento especial" id="promo-img">
<script>
  setTimeout(() => {
    document.getElementById("promo-img").style.animation = "none";
  }, 5000); // Detiene el parpadeo después de 5 segundos
</script>

✅ ¿Qué mejora?

• Se mantiene el efecto visual por menos de 5 segundos.
• Se reduce la distracción sin eliminar el propósito visual del parpadeo.

Ejemplo incorrecto 2: Texto con CSS que parpadea indefinidamente

<p class="blink">¡Oferta por tiempo limitado!</p>
<style>
  .blink {
    animation: blink-animation 1s infinite;
  }
</style>

🔴 Problema:

• El texto sigue parpadeando indefinidamente, causando distracción.
• Puede ser molesto para usuarios con baja visión o problemas de concentración.

Solución correcta: Usar un temporizador para detener el parpadeo

<p class="blink" id="oferta">¡Oferta por tiempo limitado!</p>
<style>
  .blink {
    animation: blink-animation 1s linear alternate;
  }
  @keyframes blink-animation {
    0% { opacity: 1; }
    100% { opacity: 0; }
  }
</style>
<script>
  setTimeout(() => {
    document.getElementById("oferta").classList.remove("blink");
  }, 5000); // Detiene el parpadeo después de 5 segundos
</script>

✅ ¿Qué mejora?

• El parpadeo se detiene automáticamente después de 5 segundos.
• Se mantiene la accesibilidad, evitando distracciones innecesarias.

Errores comunes y cómo evitarlos

Errores frecuentes:

• Usar animaciones de parpadeo infinitas sin límite de tiempo.
• No proporcionar un mecanismo para detener el parpadeo.
• No probar el contenido con usuarios con discapacidades visuales o cognitivas.

Cómo evitar estos errores:

• Asegurar que cualquier contenido parpadeante dure menos de 5 segundos.
• Probar el contenido con herramientas de accesibilidad y usuarios reales.
• Evitar el parpadeo innecesario y optar por otras formas de resaltar información.

Preguntas frecuentes sobre la técnica general G11

¿Es obligatorio eliminar completamente el parpadeo?

No, pero debe detenerse en un máximo de 5 segundos para cumplir con WCAG 2.1.

¿Cómo puedo resaltar información sin usar parpadeo?

Puedes usar cambios de color, bordes destacados, animaciones suaves o tipografía en negrita para llamar la atención sin distraer.

¿El parpadeo afecta a todos los usuarios?

No, pero puede ser una distracción para muchas personas y, en algunos casos, puede afectar a quienes tienen epilepsia fotosensible.

¿Cómo pruebo si mi contenido parpadeante es accesible?

Puedes usar herramientas como Axe Accessibility, Lighthouse o evaluaciones manuales con temporizadores.

¿Esto impacta el SEO?

Sí, una mejor accesibilidad mejora la experiencia del usuario, lo que puede reducir la tasa de rebote y mejorar el posicionamiento en buscadores.

Recursos relacionados

• Guía oficial WCAG 2.1 para la Técnica General G11: Crear contenido que parpadee menos de 5 segundos
• Comprender el criterio de éxito 2.2.2: Pausa, Parar, Ocultar
• G152: Configuración de imágenes gif animadas para que dejen de parpadear después de n ciclos (en 5 segundos)
• G186: Uso de un control en la página web que detiene el movimiento, el parpadeo o la actualización automática del contenido
• G191: Proporcionar un enlace, botón u otro mecanismo que recargue la página sin que aparezca contenido parpadeante.
• SCR22: Uso de scripts para controlar el parpadeo y detenerlo en cinco segundos o menos

Pruebas y validación de la técnica

Procedimiento

1. Identificar todos los elementos que parpadeen en la página.
2. Verificar que cada parpadeo dure un máximo de 5 segundos.
3. Confirmar que el contenido no sigue parpadeando después del tiempo permitido.

Resultados esperados

• ✅ Si el contenido parpadea por menos de 5 segundos, la implementación es válida.
• ❌ Si el contenido sigue parpadeando indefinidamente, la técnica no está correctamente aplicada.

Reducir el tiempo de parpadeo del contenido es clave para garantizar una experiencia accesible y sin distracciones. Aplicar la Técnica G11 mejora la usabilidad de la web y facilita la navegación para todos los usuarios.

📢 ¡Si necesitas ayuda para optimizar la accesibilidad de tu sitio web, contáctanos!