La accesibilidad web garantiza que todos los usuarios, incluidos aquellos con discapacidades visuales o neurológicas, puedan interactuar con el contenido sin problemas. Uno de los problemas más comunes es el uso de efectos de parpadeo sin una opción para detenerlo. Esto puede causar molestias o incluso crisis epilépticas en usuarios fotosensibles.
El fallo F50 ocurre cuando un script hace que un contenido parpadee indefinidamente sin un mecanismo para detenerlo después de 5 segundos o menos. Esto incumple el siguiente criterio de éxito de las WCAG 2.1: 2.2.2: Pausar, detener, ocultar → El usuario debe poder controlar cualquier contenido que parpadee.
Acerca de este fallo
Este error ocurre en tecnologías que permiten controlar el parpadeo mediante scripts. Si no se proporciona un mecanismo para detener el parpadeo en un máximo de 5 segundos, se considera un incumplimiento de las WCAG.
Problemas causados por este fallo:
- Molestias visuales y dificultad de lectura para usuarios con discapacidad visual.
- Riesgo de crisis epilépticas en personas con epilepsia fotosensible.
- Interferencia en la navegación para usuarios con dificultades cognitivas o de atención.
Escenarios comunes donde ocurre este fallo:
- Uso de JavaScript para hacer parpadear elementos de texto o imágenes sin una opción de detenerlo.
- Implementación de anuncios o banners con efectos intermitentes.
- Contenidos animados que no permiten ser pausados por el usuario.
Ejemplos
Ejemplo incorrecto 1: Script que hace parpadear el contenido indefinidamente
El siguiente código usa JavaScript para alternar la visibilidad de un texto, causando un parpadeo continuo sin opción de detenerlo.
<script>
function show(){
document.getElementById("blink1").style.visibility = "visible";
setTimeout(hide, 450);
}
function hide(){
document.getElementById("blink1").style.visibility = "hidden";
setTimeout(show, 450);
}
show();
</script>
...
<span id="blink1">Este contenido parpadea</span>🔴 Problema:
- El parpadeo nunca se detiene.
- No hay un mecanismo para que el usuario lo pause.
Solución correcta: Incluir un temporizador para detener el parpadeo
Este código detiene el parpadeo después de 5 segundos.
<script>
let blinkCount = 0;
function show(){
if (blinkCount < 10) {
document.getElementById("blink1").style.visibility = "visible";
setTimeout(hide, 450);
}
}
function hide(){
if (blinkCount < 10) {
document.getElementById("blink1").style.visibility = "hidden";
blinkCount++;
setTimeout(show, 450);
}
}
show();
</script>
...
<span id="blink1">Este contenido parpadea</span>✅ ¿Qué mejora?:
- El parpadeo se detiene después de 5 segundos, cumpliendo con WCAG 2.2.2.
- Se minimiza el riesgo de crisis epilépticas y molestias visuales.
Errores comunes y cómo evitarlos
Errores frecuentes:
- Usar JavaScript o CSS para crear efectos de parpadeo sin restricciones de tiempo.
- Implementar banners o anuncios parpadeantes sin un botón de pausa.
- No probar el sitio con herramientas de accesibilidad para detectar contenido intermitente.
Cómo evitar estos errores:
- Evita los efectos de parpadeo siempre que sea posible. Usa otros métodos para resaltar contenido.
- Si necesitas parpadeo, asegúrate de que se detenga en 5 segundos o menos.
- Proporciona una opción para pausar o detener la animación manualmente.
- Prueba el contenido con herramientas como WAVE o Axe DevTools para asegurarte de que cumple con WCAG 2.2.2.
Preguntas frecuentes
¿Por qué el parpadeo puede ser un problema de accesibilidad?
Porque puede provocar crisis epilépticas en personas fotosensibles y dificultar la lectura a usuarios con discapacidad visual o cognitiva.
¿Se pueden usar efectos de parpadeo en una web accesible?
Sí, pero solo si se detienen en 5 segundos o menos o si el usuario tiene control sobre ellos.
¿Qué alternativas existen al parpadeo?
Usar colores contrastantes, negritas o animaciones suaves para llamar la atención sin parpadeo.
¿Cómo puedo detectar efectos de parpadeo en mi web?
Usa herramientas como WAVE, Axe DevTools o Lighthouse para identificar contenido intermitente.
¿Cuál es la mejor práctica para banners animados?
Proporcionar un botón de pausa o detener animación para que el usuario tenga control total.
¿Se permite el parpadeo en textos de error o notificaciones?
No, es preferible usar colores llamativos y negritas sin necesidad de efectos intermitentes.
Recursos relacionados
- Guía oficial WCAG 2.1 para el fallo común F50: Fallo del Criterio de Conformidad 2.2.2 debido a un script que provoca un efecto de parpadeo sin un mecanismo para detener el parpadeo a los 5 segundos o menos
- Comprender el criterio de éxito 2.2.2: Pausa, Detener, Ocultar
- SCR22: Uso de scripts para controlar el parpadeo y detenerlo en cinco segundos o menos
Pruebas y validación
Procedimiento
- Identificar los elementos con parpadeo en la página.
- Comprobar si el parpadeo se detiene en 5 segundos o menos.
- Verificar si el usuario tiene alguna opción para pausar o detener el parpadeo.
Resultados esperados
- ❌ Si el parpadeo continúa más de 5 segundos sin opción de detenerlo, falla el criterio 2.2.2.
- ✅ Si el parpadeo se detiene automáticamente o el usuario puede pausarlo, cumple con el criterio 2.2.2.
Evita el parpadeo innecesario en tu web y sigue las WCAG 2.1 para garantizar una experiencia accesible para todos los usuarios.
💡 Si necesitas ayuda con la accesibilidad de tu web, contáctanos!