Cómo diseñar un banner de cookies conforme y fácil de usar

Un banner de cookies conforme y fácil de usar muestra opciones claras en la primera pantalla, normalmente “Aceptar todo”, “Rechazar todo” y “Personalizar”, con el mismo peso visual. Explica las finalidades en un lenguaje sencillo, mantiene desactivadas las cookies no esenciales hasta que el visitante decide, funciona con teclado y lector de pantalla, no desplaza el diseño de la página y permite cambiar de opinión más adelante.

¿Qué debe incluir la primera capa de un banner de cookies?

La primera capa necesita información suficiente para tomar una decisión informada y formas igual de sencillas de aceptar o rechazar. Todo lo demás puede estar un clic más allá.

Incluye estos elementos:

• Una breve declaración de finalidades que indique para qué usas las cookies, como la analítica y la publicidad, y que mencione cuándo intervienen socios.
• Tres acciones con la misma prominencia: aceptar todo, rechazar todo y personalizar, con el mismo tamaño, el mismo estilo y al mismo nivel.
• Un enlace a tu política de cookies con todos los detalles.
• El número de proveedores, si utilizas el IAB Transparency & Consent Framework, porque TCF v2.2 exige mostrar el número de proveedores en la primera capa. Consulta IAB TCF 2.2, explicado.

Ejemplo de texto para la primera capa:

Usamos cookies para que este sitio funcione y, con tu permiso, para medir el tráfico y mostrar anuncios relevantes junto con nuestros socios. Puedes aceptarlas todas, rechazarlas todas o elegir por categoría, y cambiar de opinión cuando quieras en “Configuración de cookies”.

Evita un titular como “Valoramos tu privacidad” seguido de un único botón “OK”. Un texto que suena tranquilizador pero no nombra ninguna finalidad no informa a nadie. La mayoría de los patrones oscuros que persiguen las autoridades son lo contrario de las prácticas de esta guía.

¿Cómo debe funcionar la capa de configuración?

La capa de configuración permite a los visitantes elegir por finalidad. Agrupa las cookies en un número reducido de categorías, como necesarias, preferencias, analítica y marketing, y mantén desactivadas por defecto todas las categorías no esenciales.

Para cada categoría, muestra una descripción de una frase, algunos ejemplos concretos y los proveedores implicados. Marca la categoría de necesarias como “siempre activa” en lugar de ofrecer un interruptor que no hace nada. Ofrece “Guardar selección” junto a “Aceptar todo” y “Rechazar todo”, sin que ninguno quede favorecido visualmente.

Haz que se pueda recorrer de un vistazo. Una larga pared de interruptores por proveedor dificulta la decisión informada en lugar de facilitarla. Coloca el detalle por proveedor en una sección desplegable para quien lo quiera ver.

¿Dónde debe colocarse el banner en la página?

No existe una única posición conforme. Lo que importa es que el banner se vea, no oculte la opción de rechazo y no perjudique a la página.

• Barra inferior o recuadro en una esquina: molesta menos y sirve para la mayoría de los sitios, siempre que las cookies no esenciales permanezcan desactivadas hasta que se elija.
• Modal centrado: obliga a decidir antes de usar el sitio, pero debe seguir ofreciendo un rechazo equivalente o empezará a funcionar como un muro de cookies.
• Móvil: evita cubrir toda la pantalla, apila los botones a todo el ancho con un estilo idéntico y mantenlos al alcance del pulgar.

El rendimiento forma parte del diseño. Muestra el banner como una capa superpuesta de posición fija para que no desplace el contenido hacia abajo, lo que penalizaría el Cumulative Layout Shift (CLS). Un banner con mucho texto también puede acabar midiéndose como el elemento Largest Contentful Paint (LCP) de la página, y unos controladores de clic pesados pueden ralentizar el Interaction to Next Paint (INP). Nuestra guía sobre los banners de cookies y las Core Web Vitals entra en los detalles.

¿Cómo hago accesible un banner de cookies?

Constrúyelo con HTML semántico: botones reales, un contenedor etiquetado, estilos de foco visibles y un contraste de color suficiente. Un visitante que no puede manejar el banner no puede dar ni negar su consentimiento.

<div role="dialog" aria-labelledby="cc-title" aria-describedby="cc-desc">
  <h2 id="cc-title">Tus preferencias de cookies</h2>
  <p id="cc-desc">
    Solo usamos cookies de analítica y publicidad si lo permites.
    <a href="/cookie-policy">Lee nuestra política de cookies</a>
  </p>
  <button type="button">Rechazar todo</button>
  <button type="button">Personalizar</button>
  <button type="button">Aceptar todo</button>
</div>

Unas pocas reglas marcan la diferencia:

1. Usa elementos <button>, no elementos <div> en los que se pueda hacer clic, para que el teclado y las tecnologías de apoyo funcionen por defecto.
2. Si el banner bloquea la página, añade aria-modal="true", mueve el foco a su interior, mantenlo ahí hasta que se elija y después devuelve el foco a la página.
3. Cumple el contraste WCAG AA (4,5:1 para texto normal) en todos los botones, incluido el de rechazar.
4. Da a cada control de categoría un nombre y un estado accesibles, como una casilla etiquetada o un elemento con role="switch" y aria-checked.
5. Admite el zoom y las pantallas pequeñas sin ocultar ninguna de las tres acciones.

¿Cómo debe comportarse el banner después de una elección?

Aplica la elección de inmediato y recuérdala. Si alguien acepta la analítica, carga esas etiquetas al momento. Si la rechaza, o retira después su consentimiento, deja de cargarlas y elimina las cookies propias que controlas.

Después, cuida los detalles:

• Acceso permanente: añade un enlace de “Configuración de cookies” en el pie de página o un pequeño botón flotante, porque retirar el consentimiento debe ser tan fácil como darlo.
• Repetición sensata de la pregunta: no muestres el banner en cada visita. Vuelve a preguntar después de un periodo razonable o cuando tus finalidades o tus proveedores cambien de forma significativa.
• Comportamiento por región: los visitantes de la UE y del Reino Unido necesitan un consentimiento previo (opt-in). El modelo de California es de exclusión voluntaria (opt-out), con un enlace “Do Not Sell or Share My Personal Information” y el respeto de las señales de Global Privacy Control.
• Registros: guarda qué eligió cada visitante, cuándo y qué versión del banner vio, para poder demostrar el consentimiento más adelante.

¿Qué debo comprobar antes del lanzamiento?

Sigue esta secuencia antes de publicar un banner nuevo o rediseñado:

1. Confirma que no se carga nada no esencial antes de la elección, usando una sesión limpia del navegador.
2. Haz clic en “Rechazar todo” y verifica que las solicitudes de analítica y publicidad siguen bloqueadas en todas las páginas.
3. Acepta, retira después el consentimiento mediante el enlace del pie de página y verifica que las etiquetas se detienen.
4. Completa todo el flujo solo con el teclado y, después, con un lector de pantalla.
5. Prueba en la pantalla de un teléfono pequeño en orientación vertical.
6. Mide el CLS, el LCP y el INP con el banner visible.
7. Revisa el banner en todos los idiomas y regiones a los que das servicio.

En resumen

Un buen banner de cookies es honesto, equilibrado y rápido: opciones equivalentes, palabras sencillas, controles accesibles y un comportamiento que coincide con lo que dicen los botones. Diseña para el visitante que quiere rechazar con el mismo cuidado que para el que acepta. Herramientas como Cookiesh pueden servir banners para el RGPD, la CCPA y la LGPD segmentados geográficamente desde un cargador que no provoca saltos de diseño, para que tu equipo pueda centrarse en los textos y el diseño.

Este artículo ofrece información general y no constituye asesoramiento jurídico. Para tomar decisiones sobre tu situación concreta, consulta a un profesional cualificado en privacidad.