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.
Las luces intermitentes y los efectos visuales rápidos pueden ser peligrosos para personas con epilepsia fotosensible, ya que pueden provocar convulsiones. Para evitar esto, la Técnica G15 de WCAG 2.1 establece que el contenido debe cumplir con el criterio de éxito 2.3.1 (Tres Destellos o por Debajo del Umbral).
El objetivo de esta técnica es utilizar herramientas de prueba para detectar si un contenido excede los umbrales de destello. Esto garantiza que los usuarios puedan navegar sin riesgos y sin la necesidad de advertencias previas que podrían no ser efectivas.
Acerca de esta técnica
Esta técnica se aplica a cualquier tecnología que genere contenido visual con destellos o parpadeos. Para cumplir con los estándares de accesibilidad, el contenido debe:
- No exceder tres destellos por segundo.
- Evitar destellos rojos intensos, ya que son más propensos a causar convulsiones.
- Ser evaluado con herramientas especializadas para garantizar que cumple con los umbrales de seguridad.
¿Cuándo es crucial aplicar esta técnica?
- En animaciones o videos con destellos rápidos.
- En juegos interactivos con efectos de parpadeo.
- En publicidad en línea que utiliza luces intermitentes.
- En sitios web con elementos dinámicos como banners animados.
Ejemplos
Ejemplo incorrecto 1: Animación con relámpagos sin control de destello
<div class="lightning">
<img src="relampago1.gif" alt="Destello de relámpago">
<img src="relampago2.gif" alt="Otro destello de relámpago">
</div>🔴 Problema:
- Los destellos ocurren con demasiada frecuencia y rapidez, superando el umbral seguro.
- Puede provocar ataques epilépticos en usuarios con fotosensibilidad.
Solución correcta: Reducir la frecuencia de los destellos
<div class="lightning" style="animation: flashAnimation 2s linear infinite;">
<img src="relampago1.gif" alt="Destello de relámpago con pausa entre efectos">
</div>
<style>
@keyframes flashAnimation {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
</style>✅ ¿Qué mejora?:
- Reduce la frecuencia de los destellos a menos de 3 por segundo.
- Minimiza el riesgo para personas con epilepsia fotosensible.
Ejemplo incorrecto 1: Publicidad con efectos de parpadeo excesivo
<marquee behavior="scroll" direction="left">
<p style="color: red; background-color: yellow; font-weight: bold;">¡Oferta especial! 50% de descuento 🔥🔥🔥</p>
</marquee>🔴 Problema:
- El texto parpadeante y con colores intensos puede ser peligroso para personas con fotosensibilidad.
- Los lectores de pantalla pueden no interpretar correctamente el movimiento.
Solución correcta: Mantener el mensaje sin parpadeo excesivo
<p style="font-weight: bold; color: #ff6600;">¡Oferta especial! 50% de descuento 🔥</p>✅ ¿Qué mejora?:
- Evita efectos parpadeantes innecesarios.
- Mantiene la información visible y accesible sin riesgos.
Errores comunes y cómo evitarlos
Errores frecuentes:
- No verificar si los destellos superan los umbrales de seguridad.
- Usar colores intensos como rojo en destellos rápidos.
- Asumir que una advertencia es suficiente para mitigar el riesgo.
Cómo evitar estos errores:
- Usar herramientas de prueba como PEAT (Photosensitive Epilepsy Analysis Tool).
- Reducir la frecuencia de los destellos a menos de 3 por segundo.
- Evitar el uso de efectos de parpadeo en colores intensos como el rojo.
Preguntas frecuentes sobre la técnica general G15
¿Es suficiente colocar una advertencia en la web?
No. Aunque una advertencia puede ser útil, no garantiza que todos los usuarios la vean o la comprendan, especialmente los niños.
¿Qué herramientas se pueden usar para verificar el contenido?
- PEAT (Photosensitive Epilepsy Analysis Tool).
- Harding FPA Test.
- Herramientas de evaluación de accesibilidad de video.
¿Puedo usar efectos de luz si son sutiles?
Sí, siempre y cuando no superen los 3 destellos por segundo y no utilicen rojo intenso.
¿Esta técnica afecta a la experiencia visual del usuario?
No necesariamente. Los efectos pueden ser sutiles y atractivos sin comprometer la accesibilidad.
Recursos relacionados
- Guía oficial WCAG 2.1 para la Técnica General G15: Usar una herramienta para garantizar que el contenido no infrinja el umbral de destello general o el umbral de destello rojo
- Comprender el criterio de éxito 2.3.1: Tres destellos o menos del umbral
- Sitio web de Harding FPA
- Herramienta de análisis de epilepsia fotosensible (PEAT) de Trace Center
- G19: Garantizar que ningún componente del contenido parpadee más de tres veces en un período de 1 segundo
- G176: Mantener el área intermitente lo suficientemente pequeña
Pruebas y validación
Procedimiento
- Identificar contenido con destellos o parpadeo.
- Usar una herramienta de análisis como PEAT para evaluar si los destellos superan el umbral seguro.
- Verificar si se cumplen los umbrales de seguridad:
- No más de 3 destellos por segundo.
- Evitar destellos de color rojo intenso.
Resultados esperados
- ✅ Si el contenido no supera los umbrales de destello, la implementación es correcta.
- ❌ Si el contenido excede los umbrales, debe corregirse o eliminarse.
Garantizar que el contenido visual no cause problemas a personas con epilepsia fotosensible es una responsabilidad de todos los desarrolladores y diseñadores web. Aplicando la Técnica G15 y utilizando herramientas de prueba adecuadas, podemos crear un entorno web más seguro y accesible para todos.
📢 ¡Si necesitas ayuda con la accesibilidad de tu sitio web, contáctanos!