Addaw, ir a inicio Donar

Fallo común WCAG 2.2

F41Páginas que se recargan solas cada cierto tiempo

Nombre oficial en el W3C: Fallo de los criterios de conformidad 2.2.1, 2.2.4 y 3.2.5 debido a usar meta refresh para recargar la página

En pocas palabras

El error es usar la etiqueta meta refresh para que la página se recargue sola cada pocos segundos o minutos, sin forma de pararlo. Es habitual en marcadores deportivos, tablones de noticias o paneles de datos. Cada recarga corta la lectura y devuelve a la persona al principio de la página.

Por qué es importante

Nadie puede saber cuánto tarda cada persona en leer una página. Una recarga a destiempo hace perder lo que se estaba leyendo.

  • El lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) vuelve a empezar desde arriba tras cada recarga. Con recargas frecuentes, la persona nunca llega al final.
  • Quien ha bajado por la página o está rellenando un campo pierde su posición y, a veces, lo que había escrito.
  • Quien ve bien también se despista cuando el contenido salta sin aviso.

Cómo evitarlo

  1. No use <meta http-equiv="refresh" content="60"> ni nada parecido para recargar la página.
  2. Ponga un botón «Actualizar» para que la persona traiga los datos nuevos cuando quiera.
  3. Si los datos deben actualizarse solos, cambie solo la parte necesaria con JavaScript, sin recargar la página entera.
  4. En ese caso, añada un control para pausar o desactivar la actualización automática.
  5. Algunos casos en tiempo real, como una subasta, pueden ser una excepción. Aun así, es mejor dar control a la persona.

Cómo comprobarlo

  1. Abra el código fuente (Ctrl+U) y busque http-equiv="refresh".
  2. Si el atributo content tiene solo un número de segundos, sin url=, la página se recarga cada vez que pasa ese tiempo.
  3. Deje la página abierta y baje hasta la mitad. Si vuelve sola al principio o el contenido cambia, hay recarga automática.
  4. Busque en la página una forma de parar, ampliar o ajustar esa recarga. Si no la hay, se produce el fallo.

Ejemplo

Un marcador que se recarga entero cada 30 segundos (incorrecto) frente a otro que se actualiza cuando la persona lo pide (correcto).

<!-- Incorrecto: la página se recarga sola cada 30 segundos -->
<meta http-equiv="refresh" content="30">

<!-- Correcto: la persona decide cuándo actualizar -->
<p>Resultado: Equipo local 2 - Equipo visitante 1 (minuto 63)</p>
<form method="get">
  <button type="submit">Actualizar resultado</button>
</form>
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 F41 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

meta http-equiv="refresh" se usa a menudo para actualizar páginas periódicamente o para redirigir a los usuarios a otra página. Si el intervalo de tiempo es demasiado corto y no hay forma de desactivar la actualización automática, las personas ciegas no tendrán tiempo suficiente para que su lector de pantalla lea la página antes de que esta se actualice de forma inesperada y haga que el lector de pantalla empiece a leer de nuevo desde el principio. Los usuarios con visión también pueden desorientarse con la actualización inesperada.

Ejemplos

Este es un ejemplo desaconsejado que cambia la página del usuario a intervalos regulares. Quien desarrolla contenidos no debería usar esta técnica para simular una tecnología de envío automático («push»). Es imposible predecir cuánto tiempo necesitará un usuario para leer una página; una actualización prematura puede desorientar a los usuarios. Quien desarrolla contenidos debería evitar la actualización periódica y permitir que los usuarios elijan cuándo quieren la información más reciente. (El número del atributo content es el intervalo de actualización en segundos.)

<!doctype>
<html lang="en">
<head>     
  <title>HTML Techniques for WCAG 2</title>     
  <meta http-equiv="refresh" content="60" />   
</head>
<body>
  ...     
</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 1 o mayor que 72000.
  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 se actualiza una vez transcurrido el tiempo especificado en el atributo content.

Resultados esperados

  • 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.
  • 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.
  • Si las comprobaciones n.º 1 y n.º 4 son falsas, se da esta condición de fallo y el contenido falla el criterio de conformidad 3.2.5.

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