F4Texto que parpadea con text-decoration: blink (obsoleto)

Por qué es importante

Un texto que parpadea sin parar distrae mucho. A las personas con dificultades de atención les impide concentrarse en el resto de la página. A quien lee despacio o tiene baja visión le cuesta leer un texto que aparece y desaparece.

El criterio 2.2.2 pide que lo que parpadea solo durante más de cinco segundos se pueda pausar, detener u ocultar. Hoy el parpadeo se hace con animaciones CSS o con JavaScript, y la regla se aplica igual.

Cómo evitarlo

1. No use text-decoration: blink ni el antiguo elemento <blink>. Bórrelos si aparecen en código heredado.
2. Para destacar algo, prefiera un color, un icono o una etiqueta fija, como «Oferta».
3. Si usa una animación de parpadeo, haga que termine sola en cinco segundos o menos. Por ejemplo, con un número de repeticiones limitado.
4. Si debe durar más, ponga un botón para pausarla o detenerla.
5. Respete la preferencia de reducir el movimiento con @media (prefers-reduced-motion: reduce).

Cómo comprobarlo

1. Busque blink en las hojas de estilo, en los atributos style y en el HTML.
2. Abra la página y observe si algo parpadea. Mida con un reloj cuánto dura.
3. Si dura más de cinco segundos, compruebe que hay un control para pararlo y que funciona con el teclado.

Ejemplo

La alternativa actual: una animación que parpadea tres veces y se detiene sola a los tres segundos.

<style>
  /* 3 repeticiones de 1 segundo: termina a los 3 segundos */
  .oferta { animation: parpadeo 1s 3; }
  @keyframes parpadeo { 50% { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) {
    .oferta { animation: none; }
  }
</style>
<p>Bicicleta urbana <span class="oferta">¡Rebajada a 299 €!</span></p>