Saltar al contenido
Mera News

Guía para editores, capítulo 3

Ventanas emergentes y consentimiento

Última revisión: noviembre de 2026

Cada caja que aparece sobre un artículo se interpone entre el lector y el motivo por el que llegó. Algunas son obligatorias por ley. Muchas no. Este capítulo explica qué pide Google, qué han dicho los reguladores europeos sobre el consentimiento y cómo crear un aviso que funcione con teclado y con lector de pantalla. No es asesoramiento jurídico, así que revisa tu banner con tu propio asesor.

Qué pide Google

Google describe los intersticiales intrusivos como elementos de página que bloquean la vista del contenido al lector, y advierte de que pueden empeorar el rendimiento en la búsqueda. Su guía es concreta:

  • No cubras toda la página.
  • No envíes al lector a una página aparte para el consentimiento o para que introduzca datos. Si todas las URL redirigen a una sola página de consentimiento, todas menos esa pueden desaparecer de los resultados de búsqueda.
  • Usa banners que ocupen una pequeña fracción de la pantalla en lugar de intersticiales de página completa.
  • Aplica el mismo cuidado a los cuadros de diálogo promocionales de cualquier tipo, incluidos los avisos de boletín y de instalación de apps.

Para las instalaciones de apps, Google señala opciones compatibles con el navegador, como los Smart App Banners de Safari, o un banner HTML sencillo que enlace a la tienda correcta.

Los intersticiales exigidos por ley están exentos de esta guía. Las verificaciones de edad son el ejemplo de Google. Si necesitas una, mantén el contenido en la página bajo la superposición para que pueda seguir indexándose.

Los Better Ads Standards cubren la publicidad. Los anuncios emergentes figuran tanto en escritorio como en móvil. En móvil, los anuncios prestitiales figuran con o sin cuenta atrás. En escritorio, el formato que figura es el prestitial con cuenta atrás, y uno que se puede cerrar de inmediato no cae por debajo del estándar.

Qué han dicho los reguladores europeos sobre el consentimiento

El Comité Europeo de Protección de Datos (EDPB) ha publicado directrices sobre el consentimiento y un informe de su grupo de trabajo sobre banners de cookies. El informe del grupo recoge un umbral mínimo acordado para tramitar reclamaciones, y las normas nacionales siguen aplicándose, así que trata estos puntos como una base.

  • Nada que necesite consentimiento se ejecuta antes. Las cookies que requieren consentimiento no pueden instalarse hasta que el lector haya aceptado mediante una acción positiva.
  • Desplazarse no es consentir. Las directrices dicen que desplazarse o deslizar no cuenta en ningún caso como una acción clara y afirmativa.
  • Las casillas premarcadas no son consentimiento. Lo mismo vale para el silencio o para seguir usando el servicio sin más.
  • Ofrece una forma de rechazar. Una gran mayoría de las autoridades del grupo consideró una infracción un banner sin opción de rechazo en ninguna capa que tenga un botón de consentimiento.
  • No escondas el rechazo. Un enlace de rechazo enterrado en un párrafo, sin nada que llame la atención sobre él, no conduce a un consentimiento válido. Los colores y el contraste de los botones se evalúan caso por caso.
  • El acceso no puede depender de aceptar. Las directrices ponen como ejemplo de consentimiento no otorgado libremente una página que bloquea todo el contenido hasta que el lector pulsa «Aceptar cookies».
  • Retirar el consentimiento debe ser tan fácil como darlo. Si consentir llevó un clic, retirarlo también debería llevarlo. Un enlace permanente en un lugar visible y estándar es una opción, y el grupo menciona también un icono pequeño.

Crea un aviso que todos puedan usar

Un banner que no bloquea la página

Un banner pequeño permite al lector seguir, que es lo que prefiere Google. Aun así debe cumplir las WCAG 2.2. El criterio de éxito 2.4.11, Foco no oculto (mínimo), falla si un banner fijo oculta por completo el elemento que tiene el foco del teclado. Añade un relleno de desplazamiento igual a la altura del banner:

html {
  scroll-padding-bottom: 96px; /* the banner's height */
}

Superpón el banner, o reserva su espacio, para que no empuje el artículo hacia abajo ni añada saltos de diseño.

Un diálogo modal

Si el aviso debe detener al lector, constrúyelo como un auténtico diálogo modal con el patrón del W3C.

<div role="dialog" aria-modal="true"
     aria-labelledby="consent-title" aria-describedby="consent-text">
  <h2 id="consent-title">Your privacy choices</h2>
  <p id="consent-text">Choose whether this site may use cookies for advertising.</p>
  <button type="button">Reject all</button>
  <button type="button">Accept all</button>
  <button type="button">Choose settings</button>
</div>
  • Mueve el foco al interior del diálogo cuando se abra.
  • Tab y Mayús + Tab recorren los controles del diálogo y vuelven al principio o al final.
  • Escape cierra el diálogo. Trátalo como que no se ha elegido nada, nunca como aceptación.
  • Al cerrarse, devuelve el foco al elemento que lo abrió. Si el diálogo se abrió al cargar la página, mueve el foco al inicio del contenido.

En móvil

  • Ancla el banner al borde inferior de la pantalla y deja visible el titular por encima.
  • Apila los botones a todo el ancho para que cada uno sea fácil de tocar, con Aceptar y Rechazar del mismo tamaño.
  • Mantén el texto breve y lleva el detalle a una segunda capa.
  • Comprueba el diseño a 320 píxeles CSS de ancho y con el texto ampliado al 200%. Los botones deben seguir al alcance sin desplazarse hacia los lados.

En escritorio

  • Usa una barra inferior o un panel en una esquina, y deja despejado el artículo.
  • Haz que todos los controles funcionen con el teclado, con un indicador de foco visible.
  • Mantén el texto con una relación de contraste de al menos 4,5:1, o 3:1 para texto grande.

Lista de comprobación

  • Carga tu página de inicio y un artículo con un perfil de navegador nuevo, en un teléfono y en un escritorio. Cuenta lo que aparece sobre el contenido.
  • Quita toda superposición de página completa que la ley no exija.
  • Quita cualquier redirección a una página de consentimiento aparte.
  • Confirma que ninguna etiqueta que necesite consentimiento se activa antes de que el lector acepte.
  • Pon una opción de rechazo allí donde haya una de aceptación, como un botón del mismo peso.
  • Quita las casillas premarcadas y cualquier lógica que cuente el desplazamiento como consentimiento.
  • Añade un enlace o icono permanente para cambiar las opciones de privacidad, en todas las páginas.
  • Recorre el banner con Tab sin ratón y confirma que el foco sigue visible y nunca desaparece detrás de él.
  • Prueba un modal con un lector de pantalla, incluidos Escape y la devolución del foco.
  • Sustituye las ventanas emergentes personalizadas de instalación de apps por un banner pequeño.

Fuentes