Técnica HTML WCAG 2.2

H76Redirigir al instante con meta refresh a cero segundos

Nombre oficial en el W3C: Usar meta refresh para crear una redirección instantánea en el lado del cliente

En pocas palabras

Si una página ha cambiado de dirección y no se puede redirigir desde el servidor, se puede hacer desde el HTML. Se usa una etiqueta meta refresh con un tiempo de 0 segundos. Así la página nueva carga enseguida, sin que nadie vea un contenido que luego desaparece de golpe.

Por qué es importante

Una página que cambia sola tras unos segundos desorienta. Quien usa un lector de pantalla puede estar escuchando el texto cuando, de pronto, se carga otra página. Quien lee despacio puede no terminar de leer el aviso.

Con tiempo cero no hay ningún cambio por sorpresa: la persona llega directamente a la página nueva. Esto ayuda a cumplir el criterio 3.2.5, que evita los cambios de página que la persona no ha pedido.

Cómo se hace

Si es posible, redirija desde el servidor (redirección 301). Es la mejor opción.
Si no, ponga en el <head> la etiqueta <meta http-equiv="refresh" content="0; url=…">.
Use siempre 0 como tiempo. Un tiempo mayor es un fallo de accesibilidad.
En el cuerpo de la página, ponga solo un aviso breve con un enlace a la nueva dirección.

Cómo comprobarlo

Busque en el código las etiquetas <meta http-equiv="refresh">.
Compruebe que el atributo content empieza por 0, seguido de ; url= y la dirección nueva.
Abra la dirección antigua y confirme que llega a la nueva sin ver contenido intermedio.

Ejemplo

Página antigua de una sede electrónica que lleva al instante a la nueva dirección.

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>La sede electrónica ha cambiado de dirección</title>
  <meta http-equiv="refresh" content="0; url=https://sede.ejemplo.es/">
</head>
<body>
  <p>La sede electrónica está ahora en <a href="https://sede.ejemplo.es/">sede.ejemplo.es</a>.</p>
</body>
</html>

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

HTML

Descripción

El objetivo de esta técnica es permitir redirecciones en el lado del cliente sin confundir al usuario. Es preferible implementar las redirecciones en el lado del servidor (consulte Implementar redirecciones automáticas en el lado del servidor en lugar de en el lado del cliente), pero los autores no siempre tienen control sobre las tecnologías del lado del servidor.

En HTML se puede usar el elemento meta con el valor del atributo http-equiv establecido en refresh y el valor del atributo content establecido en 0 (es decir, cero segundos), seguido del URI que el navegador debe solicitar. Es importante que el tiempo de espera sea cero, para evitar que se muestre contenido antes de que se cargue la nueva página. La página que contiene el código de redirección solo debería contener información relacionada con la redirección.

Ejemplos

Redirigir una página instantáneamente

<!doctype html>
<html lang="en">    
  <head>
    <meta charset="utf-8">
    <title>Panucci's Pizza</title>
    <meta http-equiv="refresh" content="0; URL=https://planet-express.example.com">
  </head>    
  <body>
    <p>This page has moved to <a href="https://planet-express.example.com">
       Planet Express</a>.</p> 
  </body>  
</html>

Pruebas

Procedimiento

Localizar todos los elementos meta del documento que contengan el atributo http-equiv con el valor refresh y comprobar que:

el atributo content tiene un número con el valor 0, y
el número va seguido de ;URL=anyURL (donde anyURL representa el URI que debe sustituir a la página actual).

Resultados esperados

Las comprobaciones n.º 1 y n.º 2 son verdaderas.

Recursos

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 H76 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.