La accesibilidad web es esencial para garantizar que todos los usuarios puedan interactuar con el contenido sin barreras. Sin embargo, algunos efectos visuales pueden generar problemas de legibilidad y usabilidad. Uno de los errores más comunes es el uso de text-decoration: blink en CSS sin un mecanismo para detenerlo en menos de cinco segundos.
Este problema está documentado como el Fallo Común F4 en las WCAG 2.1, incumpliendo el Criterio de Conformidad 2.2.2 (Pausar, Detener, Ocultar). En este artículo, exploraremos en detalle este fallo, su impacto en la accesibilidad y las mejores prácticas para solucionarlo.
Acerca de este fallo
El Fallo F4 ocurre cuando se utiliza la propiedad CSS text-decoration: blink para hacer que el texto parpadee sin un mecanismo que permita al usuario detener la animación en menos de cinco segundos. Este problema afecta a personas con discapacidades visuales, cognitivas y a quienes pueden experimentar efectos adversos por contenido en movimiento.
¿Por qué es un problema de accesibilidad?
- El parpadeo constante puede ser molesto y dificultar la lectura.
- Los usuarios con trastornos neurológicos pueden ser afectados negativamente.
- No hay forma de desactivar el parpadeo a través del navegador o configuración del usuario.
Ejemplos
Ejemplo incorrecto 1: Uso de text-decoration: blink en CSS
El siguiente código aplica text-decoration: blink a un mensaje de oferta especial:
<!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>
<style>
.oferta {
text-decoration: blink;
color: red;
}
</style>
</head>
<body>
<p>¡Gran Promoción! <span class="oferta">Descuento del 50% solo por hoy</span></p>
</body>
</html>🔴 Problema: El usuario no puede detener el parpadeo, lo que incumple el Criterio de Conformidad 2.2.2.
Solución correcta: Usar animaciones CSS con control de tiempo
En lugar de text-decoration: blink, podemos usar una animación CSS limitada 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; }
}
.oferta {
animation: blink-effect 1s step-start infinite;
}
</style>
<script>
setTimeout(() => {
document.querySelector('.oferta').style.animation = 'none';
}, 5000);
</script>
</head>
<body>
<p>¡Gran Promoción! <span class="oferta">Descuento del 50% solo por hoy</span></p>
</body>
</html>✅ ¿Qué mejora?: La animación de parpadeo se detiene después de 5 segundos, cumpliendo con WCAG 2.
Ejemplo correcto: Alternativa accesible con estilos sin movimiento
Para evitar problemas de accesibilidad, se puede destacar el texto sin parpadeo:
<p>¡Gran Promoción! <span style="color: red; font-weight: bold;">Descuento del 50% solo por hoy</span></p>✅ ¿Qué mejora?: Se usa color y negrita para llamar la atención sin afectar la accesibilidad.
Errores comunes y cómo evitarlos
Errores frecuentes:
- Usar
text-decoration: blinken CSS sin opción de detenerlo. - Implementar animaciones de parpadeo sin límite de tiempo.
- Obligar al usuario a ver un efecto sin opción de desactivarlo.
Cómo evitar estos errores:
- Evitar
text-decoration: blink; en su lugar, usar negritas, colores o estilos llamativos. - Si se usa una animación de parpadeo, asegurarse de que se detenga en 5 segundos.
- Probar el sitio con lectores de pantalla y configuraciones de accesibilidad.
Preguntas frecuentes sobre el fallo común F4
¿Por qué text-decoration: blink es un problema de accesibilidad?
El parpadeo constante del texto puede ser molesto, dificultar la lectura y afectar a usuarios con trastornos neurológicos o problemas de concentración. Además, no ofrece un mecanismo para detenerlo, incumpliendo el Criterio 2.2.2 de WCAG 2.1.
¿Puedo usar text-decoration: blink si se detiene en 5 segundos?
No, text-decoration: blink no permite controlar su duración. La mejor alternativa es usar animaciones CSS con un límite de tiempo o destacar la información con colores y negrita sin parpadeo.
¿Qué problemas puede causar el texto parpadeante en los usuarios?
- Puede ser molesto e ilegible para algunos usuarios.
- Personas con trastornos de atención pueden tener dificultades para concentrarse.
- El parpadeo constante puede provocar reacciones adversas en usuarios con epilepsia fotosensible.
¿Cómo puedo detectar si mi sitio web usa text-decoration: blink?
- Revisar los archivos CSS (hojas de estilo externas, internas e inline).
- Usar herramientas como axe DevTools o WAVE para auditar la accesibilidad.
- Analizar la página con inspección de elementos en el navegador y buscar la propiedad
text-decoration: blink.
¿Cuál es la mejor manera de resaltar texto sin usar parpadeo?
En lugar de parpadeo, puedes usar:
- Colores llamativos para destacar información importante.
- Negrita (
<strong>) para resaltar contenido sin afectar la accesibilidad. - Fondos contrastantes para hacer que el texto sobresalga sin necesidad de animaciones.
¿Qué otras técnicas pueden fallar el Criterio 2.2.2 de WCAG 2.1?
- Animaciones de texto o imágenes sin control de pausa.
- Banners o anuncios en movimiento sin opción de detenerse.
- Efectos automáticos que se repiten indefinidamente sin control del usuario.
Recursos relacionados
- Guía oficial WCAG 2.1 para el fallo común F4: Incumplimiento del Criterio de Conformidad 1.3.1 debido al uso de cambios en la presentación del texto para transmitir información sin utilizar el marcado o texto apropiado
- Comprender el criterio de éxito 2.2.2: Pausar, Detener, Ocultar
- SCR22: Uso de scripts para controlar parpadeos y detenerlos en cinco segundos o menos
- G176: Proporcionar un mecanismo para pausar o detener contenido en movimiento
- G191: Usar color y estilo en lugar de efectos de parpadeo
Pruebas y Validación
Procedimiento:
- Revisar el código CSS en busca de
text-decoration: blink. - Verificar si hay animaciones que duren más de 5 segundos.
- Probar el contenido con herramientas de accesibilidad.
Resultados Esperados:
- ❌ Si
text-decoration: blinkestá presente sin control de tiempo, el contenido falla el Criterio 2.2.2. - ✅ Si las animaciones de parpadeo se detienen en 5 segundos, el contenido es accesible.
- ✅ Si se usan estilos llamativos sin movimiento, el contenido es aún más accesible.
El uso de text-decoration: blink sin un mecanismo para detenerlo es una mala práctica de accesibilidad. Para cumplir con WCAG 2.1, es fundamental limitar el parpadeo a 5 segundos o, preferiblemente, usar alternativas visuales accesibles.
¡Aplica buenas prácticas y haz tu web más accesible para todos! 🚀