Fallo Común F7 de WCAG 2.1: Uso de objetos o subprogramas con contenido parpadeante sin opción de pausa

Jano Llorca Lis

La accesibilidad web garantiza que todos los usuarios puedan interactuar con el contenido sin barreras. Sin embargo, un problema frecuente ocurre cuando objetos o subprogramas (como applets o contenido de plug-ins) incluyen contenido parpadeante sin una opción para pausarlo. Esto puede dificultar la lectura e interacción con el sitio.

Este problema está documentado como el Fallo Común F7 en las WCAG 2.1, incumpliendo el Criterio de Conformidad 2.2.2 (Pausar, Detener, Ocultar). En este artículo, exploraremos cómo este fallo afecta la accesibilidad y cómo corregirlo.

Acerca de este fallo

El Fallo F7 ocurre cuando un contenido parpadeante dentro de un objeto, applet o plug-in no ofrece una opción para pausarlo. Esto impide que el usuario:

Lea el contenido correctamente, ya que el parpadeo constante dificulta la concentración.
Evite distracciones innecesarias, lo que puede ser molesto o perjudicial para usuarios con trastornos cognitivos.
Controle la experiencia de navegación, lo que afecta negativamente la accesibilidad.

¿Por qué es un problema de accesibilidad?

Los usuarios con discapacidad visual o cognitiva pueden no ser capaces de leer contenido parpadeante.
Personas con epilepsia fotosensible pueden verse afectadas si el parpadeo es demasiado rápido.
La falta de un mecanismo de pausa viola las pautas de WCAG 2.1, que requieren que cualquier contenido en movimiento pueda ser detenido en menos de cinco segundos.

Ejemplos

Ejemplo incorrecto 1: Uso de un Applet con contenido parpadeante sin opción de pausa

El siguiente código muestra un applet de Java que genera un anuncio con palabras clave parpadeantes.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo Incorrecto</title>
</head>
<body>
    <p>Publicidad en el sitio:</p>
    <applet code="AnuncioBlink.class" width="300" height="100">
        Su navegador no soporta Java.
    </applet>
</body>
</html>

🔴 Problema: El applet no tiene ninguna opción para detener el parpadeo, afectando la accesibilidad del contenido.

Solución correcta: Uso de JavaScript para controlar el parpadeo

En lugar de un applet, podemos usar JavaScript con un temporizador para limitar el parpadeo a cinco segundos.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo Correcto</title>
    <style>
        @keyframes blink-effect {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }
        .blink {
            animation: blink-effect 1s step-start infinite;
        }
    </style>
    <script>
        setTimeout(() => {
            document.querySelector('.blink').style.animation = 'none';
        }, 5000);
    </script>
</head>
<body>
    <p>Publicidad en el sitio: <span class="blink">¡Oferta especial!</span></p>
</body>
</html>

✅ ¿Qué mejora?: Ahora el parpadeo se detiene automáticamente después de cinco segundos, cumpliendo con las WCAG 2.1.

Ejemplo incorrecto 2: Uso de un Plug-in con contenido parpadeante

Algunos sitios usan plug-ins de Flash o Java para mostrar mensajes llamativos, pero sin opción de pausa.

<object data="anuncio.swf" type="application/x-shockwave-flash" width="300" height="100">
    <param name="movie" value="anuncio.swf">
</object>

🔴 Problema: El contenido Flash parpadeante no tiene un mecanismo de control para detener la animación.

Solución correcta: Reemplazar Plug-ins por HTML5

Una alternativa accesible es usar HTML5 y CSS para controlar el parpadeo:

<p><strong style="color: red;">¡Oferta especial!</strong></p>

✅ ¿Qué mejora?: Se usa negrita y color en lugar de parpadeo, asegurando accesibilidad.

Errores comunes y cómo evitarlos

Errores frecuentes:

Usar applets o plug-ins para mostrar contenido parpadeante sin opción de pausa.
Implementar JavaScript o CSS sin límites de tiempo.
Obligar al usuario a ver contenido en movimiento sin control.

Cómo evitar estos errores:

Usar CSS con animaciones controladas que se detengan en cinco segundos.
Permitir que el usuario pausa o detenga cualquier contenido en movimiento.
Evitar el uso de tecnologías obsoletas como Flash y Java Applets.

Preguntas frecuentes sobre el fallo común F7

¿Por qué el contenido parpadeante dentro de objetos o plug-ins es un problema de accesibilidad?

El parpadeo constante puede ser molesto y difícil de leer para muchos usuarios. Además, afecta a personas con trastornos de atención, discapacidad visual o epilepsia fotosensible, lo que puede hacer que la página sea inutilizable para ellos.

¿Cuánto tiempo puede parpadear un contenido sin que sea un problema de accesibilidad?

Según WCAG 2.1 (Criterio 2.2.2), cualquier contenido parpadeante debe detenerse automáticamente en un máximo de cinco segundos o proporcionar un mecanismo para pausarlo.

¿Cómo puedo verificar si mi sitio web tiene este problema?

Revisar si hay applets, plug-ins o elementos <object> que contengan contenido en movimiento.
Comprobar si el parpadeo dura más de cinco segundos.
Usar herramientas como axe DevTools o WAVE para identificar fallos de accesibilidad.

¿Cómo se puede corregir este problema sin eliminar el efecto visual?

Usar CSS con animaciones controladas que se detengan automáticamente en menos de cinco segundos.
Implementar un botón de pausa para permitir a los usuarios detener el parpadeo.
Optar por resaltar el contenido con negritas o colores, en lugar de parpadeo constante.

¿Qué tecnologías suelen generar este problema en los sitios web?

Java Applets que contienen anuncios o texto parpadeante.
Plug-ins de Flash o Silverlight con animaciones sin control de pausa.
JavaScript mal implementado que genera efectos de parpadeo indefinido.

¿Qué otras prácticas fallan el Criterio 2.2.2 de WCAG 2.1?

Videos en reproducción automática sin opción de detenerse.
Banners animados que no ofrecen un control de pausa.
Mensajes emergentes o tooltips que desaparecen antes de que el usuario pueda leerlos completamente.

Recursos relacionados

Pruebas y Validación

Procedimiento

Identificar cualquier contenido parpadeante dentro de objetos, applets o plug-ins.
Verificar si el parpadeo dura más de cinco segundos.
Revisar si hay un mecanismo para detener el parpadeo.

Resultados Esperados

❌ Si el parpadeo dura más de cinco segundos y no se puede detener, el contenido falla el Criterio 2.2.2.
✅ Si el contenido se detiene en cinco segundos o hay un botón de pausa, el contenido es accesible.

El uso de objetos o plug-ins con contenido parpadeante sin opción de pausa es una mala práctica de accesibilidad. Para cumplir con WCAG 2.1, es fundamental limitar el parpadeo a cinco segundos o permitir que el usuario lo controle.

¡Aplica buenas prácticas y haz tu web accesible para todos! 🚀

¿Tienes dudas? Solicita una consultoría inicial gratuita

Evaluamos tu sitio web para identificar barreras que dificultan el acceso a personas con discapacidad. Te entregamos un informe con errores detectados y soluciones para que tu web sea usable por todos.