Regla de accesibilidad: No debe utilizarse actualización retrasada de menos de 20 horas

Acerca de esta regla de accesibilidad

Cuando una página incluye una etiqueta <meta http-equiv="refresh"> con un valor de tiempo menor a 20 horas, el navegador recargará o redirigirá automáticamente la página después de ese retraso. Esto ocurre sin interacción o consentimiento del usuario, lo que crea barreras significativas para las personas con discapacidades.

Por qué esto es un problema

Las actualizaciones automáticas de página son desorientadoras para muchos usuarios. Cuando la página se recarga, el navegador mueve el foco de vuelta al inicio del documento. Un usuario que estaba leyendo contenido o rellenando un formulario pierde completamente su posición. Esto es especialmente perjudicial para:

Usuarios de lectores de pantalla (usuarios ciegos y sordociegos): Un lector de pantalla anuncia el contenido de forma lineal desde el inicio. Una actualización inesperada obliga al usuario a empezar de nuevo, perdiendo contexto y progreso.
Usuarios con discapacidades motoras: Las personas que navegan lentamente usando dispositivos de conmutación, varillas bucales u otras tecnologías de asistencia pueden no terminar de interactuar con la página antes de que se actualice, causando que pierdan su trabajo.
Usuarios con discapacidades cognitivas: Los cambios inesperados en la página pueden ser confusos y dificultar la finalización de tareas.

Esta regla se relaciona con el Criterio de Conformidad 2.2.1 de WCAG 2.2: Tiempo Ajustable (Nivel A), que requiere que para cada límite de tiempo establecido por el contenido, los usuarios puedan desactivar, ajustar o extender ese límite de tiempo. Un <meta> refresh no da a los usuarios tal control — la página simplemente se recarga o redirige sin advertencia ni opción para prevenirlo.

Cómo solucionarlo

Tienes varias opciones dependiendo de tu caso de uso:

Elimina completamente el meta refresh. Si la actualización es innecesaria, simplemente elimina la etiqueta.
Establece el retraso a 20 horas o más. Si realmente se necesita una actualización, un retraso de 20 horas o mayor cumple la regla, ya que es improbable que interrumpa la sesión de un usuario.
Usa una redirección del lado del servidor. Si el objetivo es redirigir usuarios a una nueva URL, configura una redirección 301 o 302 en el servidor en su lugar.
Usa JavaScript con controles de usuario. Si necesitas actualizaciones periódicas de contenido, usa JavaScript y proporciona a los usuarios la capacidad de pausar, extender o deshabilitar la actualización automática.

Ejemplos

Fallo: actualización automática después de 30 segundos

Esto actualiza la página cada 30 segundos sin forma de que el usuario lo detenga.

<head>
  <meta http-equiv="refresh" content="30">
</head>

Fallo: redirección retrasada después de 10 segundos

Esto redirige al usuario a otra página después de 10 segundos, sin darle control sobre el momento.

<head>
  <meta http-equiv="refresh" content="10; url=https://example.com/new-page">
</head>

Correcto: meta refresh eliminado

La solución más simple es eliminar completamente la etiqueta meta refresh.

<head>
  <title>My Page</title>
</head>

Correcto: redirección del lado del servidor en lugar del lado del cliente

Para redirecciones, usa una respuesta del lado del servidor. Por ejemplo, un encabezado HTTP 301:

HTTP/1.1 301 Moved Permanently
Location: https://example.com/new-page

Correcto: actualización con JavaScript con control de usuario

Si necesitas actualizaciones periódicas, usa JavaScript y da a los usuarios una forma de detener o ajustar la actualización.

<head>
  <title>Live Dashboard</title>
</head>
<body>
  <button id="toggle-refresh">Pausar Actualización Automática</button>
  <script>
    let refreshInterval = setInterval(function () {
      location.reload();
    }, 300000); // 5 minutos

    document.getElementById("toggle-refresh").addEventListener("click", function () {
      if (refreshInterval) {
        clearInterval(refreshInterval);
        refreshInterval = null;
        this.textContent = "Reanudar Actualización Automática";
      } else {
        refreshInterval = setInterval(function () {
          location.reload();
        }, 300000);
        this.textContent = "Pausar Actualización Automática";
      }
    });
  </script>
</body>

Correcto: retraso establecido a 20 horas o más

Si una actualización es absolutamente necesaria y no es factible una alternativa interactiva, establecer el retraso a al menos 72,000 segundos (20 horas) cumplirá la regla.

<head>
  <meta http-equiv="refresh" content="72000">
</head>

Learn more:

Deque Reference

Deque University - How To Fix

→

W3C Reference

WCAG 2.1 - Using meta refresh to create an instant client-side redirect

→

Ayúdanos a mejorar nuestras guías

¿Te ha sido útil esta guía?

Detecta problemas de accesibilidad automáticamente

Rocket Validator escanea miles de páginas con Axe Core y el W3C Validator, encontrando problemas de accesibilidad en todo tu sitio web.

Iniciar prueba gratuita Ver precios