Técnica Scripts de cliente WCAG 2.2

SCR16Avisar con un script de que el tiempo está a punto de acabarse

Nombre oficial en el W3C: Proporcionar un script que avise al usuario de que un límite de tiempo está a punto de expirar

En pocas palabras

Cuando una página tiene un tiempo límite, un script avisa al menos 20 segundos antes de que se acabe. El aviso pregunta si se necesita más tiempo. Si la persona responde que sí, el contador vuelve a empezar; si no responde, el tiempo termina como estaba previsto.

Por qué es importante

Una sesión que caduca o una página que se recarga sola puede hacer perder un formulario a medio rellenar. A quien lee despacio, usa un lector de pantalla o se mueve con dificultad le pasa más a menudo.

Un aviso previo le da la oportunidad de reaccionar. Es una de las formas que admite el criterio de tiempo ajustable.

Cómo se hace

Calcule el momento del aviso. Si el límite es de 15 minutos, programe el aviso un poco antes, con margen de al menos 20 segundos.
Muestre un mensaje claro: cuánto tiempo queda y qué pasará al acabar.
Ofrezca una acción sencilla para seguir, como un botón «Sí, necesito más tiempo».
Si la persona acepta, reinicie el contador. Si no responde, deje que el tiempo termine.
Si el aviso es una ventana propia y no confirm(), lleve el foco a ella para que el lector de pantalla la anuncie.

Cómo comprobarlo

Mida el tiempo límite de la página, por ejemplo el cierre de sesión.
Ponga un cronómetro y no toque nada.
Compruebe que el aviso aparece al menos 20 segundos antes del final.
Acepte con el teclado y confirme que el tiempo se reinicia.

Ejemplo

Aviso 20 segundos antes de cerrar una sesión de 15 minutos.

const LIMITE = 15 * 60 * 1000;
const MARGEN = 20 * 1000;
let aviso, cierre;
function iniciar() {
  clearTimeout(aviso); clearTimeout(cierre);
  aviso = setTimeout(() => {
    if (confirm("Su sesión caduca en 20 segundos. ¿Necesita más tiempo?")) iniciar();
  }, LIMITE - MARGEN);
  cierre = setTimeout(cerrarSesion, LIMITE);
}
iniciar();

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 SCR16 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

Existen límites de tiempo controlados mediante script.

Descripción

El objetivo de esta técnica es avisar a los usuarios de que están a punto de quedarse sin tiempo para completar una interacción. Cuando los scripts proporcionan una funcionalidad con límites de tiempo, el script puede incluir una función que advierta al usuario de la inminencia del límite de tiempo y proporcione un mecanismo para solicitar más tiempo. 20 segundos o más antes de que se cumpla el límite de tiempo, el script muestra un cuadro de diálogo de confirmación que indica que el límite de tiempo es inminente y pregunta si el usuario necesita más tiempo. Si el usuario responde «sí», el límite de tiempo se restablece. Si el usuario responde «no» o no responde, se permite que el límite de tiempo expire.

Esta técnica se aplica a los límites de tiempo establecidos con el método window.setTimeout(). Si, por ejemplo, el límite de tiempo está configurado para expirar a los 60 segundos, puede establecerse el límite en 40 segundos y mostrar entonces el cuadro de diálogo de confirmación. Cuando aparece el cuadro de confirmación, se establece un nuevo límite de tiempo para los 20 segundos restantes. Al expirar este «límite de tiempo de gracia», se ejecuta la acción que se habría ejecutado al expirar el límite de 60 segundos del diseño original.

Ejemplos

Una página de cotizaciones bursátiles utiliza un script para actualizar la página cada cinco minutos, con el fin de garantizar que las últimas estadísticas sigan estando disponibles. 20 segundos antes de que termine el periodo de cinco minutos, aparece un cuadro de diálogo de confirmación que pregunta si el usuario necesita más tiempo antes de que la página se actualice. Esto permite que el usuario sea consciente de la actualización inminente y la evite si lo desea.

<!doctype html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <title>Stock Market Quotes</title>
   <script>
     function timeControl() {
     // set timer for 4 min 40 sec, then ask user to confirm.
     setTimeout('userCheck()', 280000);
     }
     function userCheck() {
     // set page refresh for 20 sec
     var id=setTimeout('pageReload()', 20000);
     // If user selects "OK" the timer is reset 
     // else the page will refresh from the server.
     if (confirm("This page is set to refresh in 20 seconds. 
       Would you like more time?"))
       {
          clearTimeout(id);
          timeControl();
       }
     }
     function pageReload() {
       window.location.reload(true);
     }
    timeControl();
  </script>
</head>
<body>
   <h1>Stock Market Quotes</h1>
   ...
</body>
</html>

Pruebas

Procedimiento

En una página web que tenga un límite de tiempo controlado por un script:

Cargar la página e iniciar un temporizador 20 segundos inferior al límite de tiempo.
Cuando el temporizador termine, comprobar que se muestra un cuadro de diálogo de confirmación que advierte del límite de tiempo inminente.

Resultados esperados

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.

Solicitar una auditoría

Basado en la técnica SCR16 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.