Técnica Scripts de cliente WCAG 2.2
SCR22Detener con JavaScript el parpadeo en menos de cinco segundos
Nombre oficial en el W3C: Usar scripts para controlar el parpadeo y detenerlo en cinco segundos o menos
En pocas palabras
Si un texto o un elemento parpadea para llamar la atención, el script que lo controla debe pararlo antes de cinco segundos. Así el parpadeo no se convierte en una distracción permanente. Si tiene que durar más, hace falta un botón para pausarlo.
Por qué es importante
Un elemento que parpadea sin parar atrae la mirada una y otra vez. A personas con trastornos de atención o discapacidad cognitiva les impide concentrarse en el resto de la página.
También dificulta la lectura a personas con baja visión que usan una lupa de pantalla. Un aviso de «¡Oferta!» que parpadea en una ficha de producto es un caso típico.
Cómo se hace
- Pregúntese si el parpadeo es necesario. Muchas veces basta con un color o un icono fijo.
- Si lo mantiene, cree el efecto con JavaScript, alternando la visibilidad del elemento.
- Programe que el efecto se detenga en cinco segundos o menos y que el elemento quede visible.
- Si el parpadeo debe durar más, ofrezca un control para pausarlo o detenerlo.
- Respete la preferencia
prefers-reduced-motiondel sistema: si está activa, no lo haga parpadear.
Cómo comprobarlo
- Localice los elementos que parpadean al cargar la página o tras una acción.
- Ponga un cronómetro de cinco segundos al empezar el parpadeo.
- Compruebe que al terminar se ha detenido y el contenido queda visible.
Ejemplo
Un aviso que parpadea y se detiene a los cuatro segundos.
const aviso = document.getElementById("aviso-oferta");
const parpadeo = setInterval(() => {
aviso.style.visibility =
aviso.style.visibility === "hidden" ? "visible" : "hidden";
}, 500);
setTimeout(() => {
clearInterval(parpadeo);
aviso.style.visibility = "visible";
}, 4000);Ver el texto completo del W3C (traducción al español)
Esta es una traducción no oficial al español de la técnica SCR22 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.
Aplicabilidad
Tecnologías que permiten controlar mediante scripts el parpadeo del contenido.
Descripción
El objetivo de esta técnica es controlar el parpadeo mediante un script, de modo que este pueda configurarse para detenerse en menos de cinco segundos. El script se utiliza para iniciar el efecto de parpadeo del contenido, controlar la alternancia entre los estados visible y oculto, y también detener el efecto a los cinco segundos o menos. La función setTimeout() puede usarse para alternar el contenido parpadeante entre los estados visible y oculto, y detenerlo cuando el número de iteraciones multiplicado por el tiempo entre ellas se aproxime a los cinco segundos.
Ejemplos
Este ejemplo utiliza JavaScript para controlar el parpadeo de cierto contenido HTML y XHTML. JavaScript crea el efecto de parpadeo cambiando el estado de visibilidad del contenido. Controla el inicio del efecto y lo detiene antes de cinco segundos.
...
<div id="blink1" class="highlight">New item!</div>
<script>
// blink "on" state
function show() {
if (document.getElementById){
document.getElementById("blink1").style.visibility = "visible";
}
}
// blink "off" state
function hide() {
if (document.getElementById){
document.getElementById("blink1").style.visibility = "hidden";
}
}
// toggle "on" and "off" states every 450 ms to achieve a blink effect
// end after 4500 ms (less than five seconds)
for(let i=900; i < 4500; i=i+900) {
setTimeout("hide()",i);
setTimeout("show()",i+450);
}
</script>
...Ejemplo práctico de este código: Uso de scripts para controlar el parpadeo.
Pruebas
Procedimiento
Para cada instancia de contenido parpadeante:
- Iniciar un temporizador de 5 segundos al comienzo del efecto de parpadeo.
- Cuando el temporizador termine, determinar si el parpadeo se ha detenido.
Resultados esperados
- Para cada instancia de contenido parpadeante, la comprobación n.º 2 es verdadera.
Cómo lo comprobamos en ADDAW
En cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.
Basado en la técnica SCR22 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.