Addaw, ir a inicio Donar

Fallo común WCAG 2.2

F40Redirigir a otra página de forma automática tras unos segundos

Nombre oficial en el W3C: Fallo debido a usar una redirección meta con un límite de tiempo

En pocas palabras

El error es usar la etiqueta meta refresh para llevar a la persona a otra página cuando pasan unos segundos, sin que lo pida. Puede que aún esté leyendo y la página cambie de golpe. Si hay que redirigir, debe hacerse al instante y, mejor, desde el servidor.

Por qué es importante

Una página que cambia sola, sin aviso, interrumpe a quien la está leyendo.

  • Quien lee despacio, por ejemplo por dislexia o porque usa un ampliador de pantalla, no tiene tiempo de terminar.
  • Quien usa un lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) se encuentra de repente en otra página. No sabe qué ha pasado.
  • Es típico en avisos como «Esta página se ha trasladado. En 5 segundos irá a la nueva dirección». Muchas personas no llegan a leer el aviso entero.

Cómo evitarlo

  1. No use <meta http-equiv="refresh"> con un número de segundos mayor que cero para redirigir.
  2. Haga las redirecciones en el servidor, con un código 301 (permanente) o 302 (temporal). Son instantáneas y los buscadores también las entienden.
  3. Si solo puede usar la etiqueta meta, ponga el tiempo a cero: content="0; url=…". El cambio es inmediato y no interrumpe.
  4. Si quiere avisar del traslado, muestre el mensaje con un enlace a la nueva dirección. Deje que la persona lo pulse cuando quiera.
  5. Si el tiempo de espera es imprescindible, ofrezca una forma de pararlo, ampliarlo o ajustarlo.

Cómo comprobarlo

  1. Abra el código fuente de la página (Ctrl+U) y busque http-equiv="refresh".
  2. Mire el número del atributo content. Si es mayor que cero y lleva url=, la página redirige cuando pasa ese tiempo.
  3. Abra la página y espere sin tocar nada. Si cambia sola de dirección y no hay forma de pararlo, se produce el fallo.
  4. En las herramientas del navegador (tecla F12), pestaña «Red», mire si la redirección llega del servidor con un código 301 o 302. Esa es la forma correcta.

Ejemplo

Una redirección con retraso (incorrecta) y la alternativa: un aviso con un enlace que la persona pulsa cuando quiere.

<!-- Incorrecto: cambia de página a los 5 segundos -->
<meta http-equiv="refresh" content="5; url=/nueva-sede/">

<!-- Correcto: aviso con enlace, sin cambio automático -->
<p>
  La sede electrónica ha cambiado de dirección.
  <a href="/nueva-sede/">Ir a la nueva sede electrónica</a>
</p>
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 F40 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

Todas las páginas

Descripción

meta http-equiv="refresh" content="{time}; url=..." se usa a menudo para redirigir automáticamente a los usuarios. Cuando esto ocurre tras un tiempo de espera, se trata de un cambio de contexto inesperado que puede interrumpir al usuario.

Es aceptable usar el elemento meta para crear una redirección cuando el tiempo de espera se fija en cero, puesto que la redirección es instantánea y no se percibirá como un cambio de contexto. No obstante, es preferible usar métodos del lado del servidor para conseguirlo. Véase Implementar las redirecciones automáticas en el servidor en lugar de en el cliente.

Ejemplos

La siguiente página es un fallo porque redirigirá al URI https://www.example.com/newpage tras un límite de tiempo de 5 segundos.

<!doctype>
<html lang="en">
<head>
  <title>Do not use this!</title>     
  <meta http-equiv="refresh" content="5; url=https://www.example.com/newpage">
</head>   
<body>     
  <p>
    If your browser supports Refresh, you'll be transported to our
    <a href="https://www.example.com/newpage">new site</a> in 5 seconds,
    otherwise select the link manually.     
  </p>   
</body> 
</html>

Pruebas

Procedimiento

Para una página que use meta http-equiv="refresh":

  1. Comprobar que está presente el valor numérico de segundos hasta la actualización en el atributo content.
  2. Comprobar que el valor numérico de segundos hasta la actualización en el atributo content es menor que uno o mayor que 72.000.
  3. Comprobar si la página se acoge a las excepciones de tiempo real o esencial del criterio de conformidad 2.2.1 Tiempo ajustable.
  4. Comprobar si se ofrece al usuario la posibilidad de desactivar, ampliar o ajustar el tiempo de actualización de la página.
  5. Comprobar si la página no redirige una vez transcurrido el tiempo especificado en el atributo content.

Resultados esperados

  1. Si las comprobaciones n.º 1 a n.º 5 son falsas, se da esta condición de fallo y el contenido falla el criterio de conformidad 2.2.1.
  2. Si las comprobaciones n.º 1, n.º 2, n.º 4 y n.º 5 son falsas, se da esta condición de fallo y el contenido falla el criterio de conformidad 2.2.4.
  3. Si las comprobaciones n.º 1, n.º 4 y n.º 5 son falsas, se da esta condición de fallo y el contenido falla el criterio de conformidad 3.2.5.

Recursos

Cómo lo comprobamos en ADDAW

Este error es uno de los que buscamos en cada auditoría de ADDAW. Se lo entregamos con capturas y la forma de corregirlo.

Solicitar una auditoría

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