La accesibilidad web es fundamental para garantizar una experiencia inclusiva para todos los usuarios, incluyendo aquellos con discapacidades visuales, cognitivas o neurológicas. Un error frecuente es el uso del elemento <blink>, que provoca que el texto parpadee sin control del usuario.
El fallo F47 se produce cuando el contenido parpadeante no permite ser detenido, pausado o escondido, afectando especialmente a personas con trastornos de atención o epilepsia fotosensible.
Este fallo incumple el siguiente criterio de éxito de las WCAG 2.1: 2.2.2: Pausar, detener, ocultar → El usuario debe poder controlar cualquier contenido en movimiento o parpadeante que dure más de tres segundos.
Acerca de este fallo
El elemento <blink> no forma parte del estándar HTML actual, pero aún es soportado por algunos navegadores y agentes de usuario. Su uso provoca que el contenido parpadee indefinidamente, sin opción de ser detenido por el usuario.
Problemas causados por este fallo:
- Puede provocar ataques de epilepsia fotosensible en algunos usuarios.
- Dificulta la lectura y comprensión del contenido, afectando especialmente a personas con trastornos de atención.
- No permite el control del usuario, ya que el parpadeo no puede pausarse ni desactivarse.
- Genera distracción y frustración en la navegación web.
Escenarios comunes donde ocurre este fallo:
- Uso de
<blink>para destacar precios o promociones en una tienda online. - Mensajes de alerta que parpadean para captar la atención del usuario.
- Indicadores de error que utilizan el parpadeo como señal visual.
Ejemplos
Ejemplo incorrecto 1: Uso del elemento <blink> para resaltar ofertas
Este código incorrecto usa <blink> para llamar la atención sobre un precio de oferta.
<p>Gran oferta en nuestro producto estrella: <blink>¡Solo €19.99!</blink></p>🔴 Problema:
- El parpadeo continuo no puede ser pausado o detenido por el usuario.
- Puede afectar a personas con epilepsia fotosensible o dificultades de atención.
Solución correcta
Para resaltar texto sin comprometer la accesibilidad, se recomienda el uso de estilos CSS sin animaciones forzadas.
<p>Gran oferta en nuestro producto estrella: <span style="color: red; font-weight: bold;">¡Solo $19.99!</span></p>✅ ¿Qué mejora?:
- Se mantiene el énfasis en la oferta sin necesidad de animaciones molestas.
- No se genera un impacto negativo en la accesibilidad del contenido.
Ejemplo incorrecto 2: Uso de <blink> en una notificación de error
Este código incorrecto usa <blink> para hacer que un mensaje de error parpadee.
<p><blink>Error: Datos ingresados incorrectamente</blink></p>🔴 Problema:
- El parpadeo puede dificultar la lectura del mensaje de error.
- No permite que el usuario controle o detenga la animación.
Solución correcta
Usar estilos CSS con un color llamativo y negrita para mejorar la visibilidad del mensaje sin animaciones.
<p style="color: red; font-weight: bold;">Error: Datos ingresados incorrectamente</p>✅ ¿Qué mejora?:
- Se mantiene el mensaje de error visible de manera clara y sin distracciones.
- Se evita el uso de elementos obsoletos que afectan la accesibilidad.
Errores comunes y cómo evitarlos
Errores frecuentes:
- Usar
<blink>para resaltar contenido llamativo. - Crear animaciones de parpadeo con JavaScript sin opción de detenerlas.
- Implementar efectos visuales sin considerar su impacto en la accesibilidad.
Cómo evitar estos errores:
- Evitar el uso del elemento
<blink>, ya que no es accesible ni recomendado. - Usar estilos CSS para resaltar contenido sin animaciones forzadas.
- Permitir que los usuarios controlen cualquier animación o parpadeo en la web.
- Probar el sitio con herramientas de accesibilidad para asegurar el cumplimiento de WCAG 2.1.
Preguntas frecuentes sobre el fallo común F47
¿Está permitido el uso del elemento <blink>?
No, <blink> no forma parte del estándar HTML y su uso no es accesible. Se recomienda CSS para resaltar contenido.
¿Por qué el parpadeo es problemático en la accesibilidad?
Porque no permite control del usuario y puede generar problemas de lectura o incluso crisis epilépticas en personas fotosensibles.
¿Cómo puedo resaltar texto sin usar <blink>?
Se recomienda usar estilos CSS con colores llamativos, negrita o subrayado en lugar de efectos parpadeantes.
¿Las animaciones en CSS pueden generar el mismo problema?
Sí, si la animación es demasiado rápida o constante. Es importante que las animaciones sean pausables por el usuario.
¿Cómo pruebo si mi página es accesible para usuarios sensibles al parpadeo?
Puedes usar herramientas de evaluación de accesibilidad como WAVE o Lighthouse para analizar posibles problemas de movimiento no controlable.
¿Qué otras alternativas existen para captar la atención del usuario sin afectar la accesibilidad?
Puedes utilizar diseño visual contrastante, iconos informativos, o efectos CSS sutiles sin animaciones repetitivas.
Recursos relacionados
- Guía oficial WCAG 2.1 para el fallo común F47: Incumplimiento del Criterio de Conformidad 2.2.2 debido al uso del elemento de parpadeo
- Comprender el criterio de éxito 2.2.2: Pausa, Detener, Ocultar
- Wikipedia: Elemento parpadeante
- Uso adecuado de CSS para resaltar contenido
Pruebas y validación
Procedimiento
- Examinar el código fuente en busca del elemento
<blink>. - Comprobar si el parpadeo dura más de tres segundos y si puede ser pausado o detenido por el usuario.
Resultados esperados
- Si el código contiene
<blink>, falla el criterio 2.2.2. - Si el contenido parpadea más de tres segundos sin control del usuario, falla el criterio 2.2.2.
- Si no se usa
<blink>y el contenido resaltado es estático o puede controlarse, cumple con el criterio 2.2.2.
Evita el uso del elemento <blink> y cualquier animación de parpadeo incontrolable. En su lugar, utiliza CSS para resaltar contenido sin comprometer la accesibilidad.
💡 Si necesitas ayuda para hacer tu web más accesible, contáctanos!