# Come progettare un banner dei cookie conforme e facile da usare

> Progetta un banner dei cookie conforme al GDPR e rispettoso dei visitatori: scelte equivalenti, testi chiari, markup accessibile, niente layout shift, revoca facile.

Source: https://www.cookiesh.eu/it/blog/cookie-banner-design-best-practices  
Published: 2026-04-16

## Key takeaways

- Inserisci nel primo livello del banner le opzioni per accettare, rifiutare e personalizzare, con lo stesso peso visivo.
- Descrivi le finalità in un linguaggio specifico e semplice e, nel livello delle impostazioni, mantieni disattivata per impostazione predefinita ogni categoria non essenziale.
- Costruisci il banner con veri pulsanti, un contenitore con etichetta, focus visibile e contrasto sufficiente, così che tutti possano fare una scelta.
- Mostra il banner come overlay invece di spingere verso il basso i contenuti, così non provoca spostamenti del layout.
- Offri ai visitatori un modo sempre disponibile per modificare o revocare il consenso e applica subito la loro scelta.

Un banner dei cookie conforme e facile da usare mostra scelte chiare fin dalla prima schermata, di solito “Accetta tutto”, “Rifiuta tutto” e “Personalizza”, con lo stesso peso visivo. Spiega le finalità in un linguaggio semplice, mantiene disattivati i cookie non essenziali finché il visitatore non decide, funziona con tastiera e screen reader, non sposta il layout della pagina e permette alle persone di cambiare idea in seguito.

## Cosa deve includere il primo livello di un banner dei cookie?

Il primo livello deve contenere informazioni sufficienti per una scelta consapevole e modi ugualmente semplici per accettare o rifiutare. Tutto il resto può stare un clic più in profondità.

Includi questi elementi:

- **Una breve dichiarazione delle finalità** che indichi per cosa usi i cookie, per esempio analisi e pubblicità, e segnali quando sono coinvolti dei partner.
- **Tre azioni con pari evidenza:** accetta tutto, rifiuta tutto e personalizza, con stesse dimensioni, stesso stile e stesso livello di posizione.
- **Un link alla tua cookie policy** per tutti i dettagli.
- **Il numero di fornitori**, se usi l'IAB Transparency & Consent Framework, perché il TCF v2.2 richiede di indicarlo nel primo livello. Leggi [IAB TCF 2.2 spiegato](/it/blog/iab-tcf-2-2-explained).

Esempio di testo per il primo livello:

> Usiamo i cookie per far funzionare questo sito e, con il tuo permesso, per misurare il traffico e mostrare annunci pertinenti insieme ai nostri partner. Puoi accettare tutto, rifiutare tutto o scegliere per categoria, e cambiare idea in qualsiasi momento da “Impostazioni cookie”.

Evita un titolo come “Teniamo alla tua privacy” seguito da un unico pulsante “OK”. Un testo rassicurante che non indica alcuna finalità non informa nessuno. La maggior parte dei [dark pattern nel mirino delle autorità](/it/blog/cookie-banner-dark-patterns) è l'esatto opposto delle pratiche descritte in questa guida.

## Come deve funzionare il livello delle impostazioni?

Il livello delle impostazioni permette ai visitatori di scegliere per finalità. Raggruppa i cookie in poche categorie, come necessari, preferenze, analisi e marketing, e mantieni disattivata per impostazione predefinita ogni categoria non essenziale.

Per ogni categoria mostra una descrizione di una frase, qualche esempio concreto e i fornitori coinvolti. Indica la categoria dei necessari come “sempre attiva” invece di offrire un interruttore che non fa nulla. Proponi “Salva le scelte” accanto ad “Accetta tutto” e “Rifiuta tutto”, senza favorirne visivamente nessuno.

Mantienilo facile da scorrere con lo sguardo. Un lungo muro di interruttori per i singoli fornitori rende la scelta consapevole più difficile, non più facile. Sposta i dettagli a livello di fornitore in una sezione espandibile per chi li vuole consultare.

## Dove va posizionato il banner nella pagina?

Non esiste un'unica posizione conforme. Ciò che conta è che il banner sia ben visibile, non nasconda l'opzione di rifiuto e non peggiori la pagina.

- **Barra in basso o riquadro in un angolo:** meno invasivi e adatti alla maggior parte dei siti, purché i cookie non essenziali restino disattivati finché non viene fatta una scelta.
- **Finestra modale centrale:** impone una decisione prima dell'uso, ma deve comunque offrire un rifiuto equivalente, altrimenti inizia a funzionare come un cookie wall.
- **Mobile:** evita di coprire l'intero schermo, impila i pulsanti a tutta larghezza con uno stile identico e tienili a portata di pollice.

Le prestazioni fanno parte del design. Mostra il banner come overlay a posizione fissa, così non spinge verso il basso i contenuti, cosa che peggiorerebbe il Cumulative Layout Shift (CLS). Un banner con molto testo può anche finire per essere misurato come elemento Largest Contentful Paint (LCP) della pagina, e gestori di clic pesanti possono rallentare l'Interaction to Next Paint (INP). La nostra guida su [banner dei cookie e Core Web Vitals](/it/blog/cookie-banners-core-web-vitals) approfondisce i dettagli.

## Come rendo accessibile un banner dei cookie?

Costruiscilo con HTML semantico: veri pulsanti, un contenitore con etichetta, stili di focus visibili e un contrasto cromatico sufficiente. Un visitatore che non riesce a usare il banner non può né prestare né rifiutare il consenso.

```html
<div role="dialog" aria-labelledby="cc-title" aria-describedby="cc-desc">
  <h2 id="cc-title">Le tue scelte sui cookie</h2>
  <p id="cc-desc">
    Usiamo i cookie per analisi e annunci solo se lo consenti.
    <a href="/cookie-policy">Leggi la nostra cookie policy</a>
  </p>
  <button type="button">Rifiuta tutto</button>
  <button type="button">Personalizza</button>
  <button type="button">Accetta tutto</button>
</div>
```

Alcune regole fanno la differenza:

1. Usa elementi `<button>`, non elementi `<div>` cliccabili, così tastiere e tecnologie assistive funzionano senza accorgimenti aggiuntivi.
2. Se il banner blocca la pagina, aggiungi `aria-modal="true"`, sposta il focus al suo interno, mantienilo lì finché non viene fatta una scelta, poi riportalo sulla pagina.
3. Rispetta il contrasto WCAG AA (4,5:1 per il testo normale) su ogni pulsante, compreso quello per rifiutare.
4. Assegna a ogni controllo di categoria un nome e uno stato accessibili, per esempio una casella di controllo con etichetta o un elemento con `role="switch"` e `aria-checked`.
5. Supporta lo zoom e gli schermi piccoli senza nascondere nessuna delle tre azioni.

## Come deve comportarsi il banner dopo una scelta?

Applica subito la scelta e ricordala. Se qualcuno accetta l'analisi, carica immediatamente quei tag. Se rifiuta, o revoca in seguito il consenso, smetti di caricarli e rimuovi i cookie di prima parte che controlli.

Poi cura i dettagli:

- **Accesso sempre disponibile:** aggiungi un link “Impostazioni cookie” nel footer o un piccolo pulsante flottante, perché revocare il consenso deve essere facile quanto prestarlo.
- **Nuove richieste ragionevoli:** non mostrare il banner a ogni visita. Chiedi di nuovo dopo un periodo ragionevole o quando finalità o fornitori cambiano in modo significativo.
- **Comportamento per area geografica:** i visitatori dell'UE e del Regno Unito devono prestare un consenso opt-in. Il modello californiano è opt-out, con un link “Do Not Sell or Share My Personal Information” e il rispetto dei segnali [Global Privacy Control](/it/blog/global-privacy-control).
- **Registrazioni:** conserva cosa ha scelto ogni visitatore, quando e quale versione del banner ha visto, così potrai dimostrare il consenso in seguito.

## Cosa devo verificare prima del lancio?

Segui questa sequenza prima di pubblicare un banner nuovo o riprogettato:

1. Verifica che nulla di non essenziale venga caricato prima di una scelta, usando una sessione pulita del browser.
2. Fai clic su “Rifiuta tutto” e verifica che le richieste di analisi e pubblicitarie restino bloccate su tutte le pagine.
3. Accetta, poi revoca il consenso tramite il link nel footer, e verifica che i tag si fermino.
4. Completa l'intero flusso usando solo la tastiera, poi con uno screen reader.
5. Esegui un test sullo schermo di uno smartphone piccolo in orientamento verticale.
6. Misura CLS, LCP e INP con il banner visibile.
7. Controlla il banner in ogni lingua e area geografica in cui operi.

## In sintesi

Un buon banner dei cookie è onesto, equilibrato e veloce: scelte equivalenti, parole semplici, controlli accessibili e un comportamento coerente con quanto dicono i pulsanti. Progetta per il visitatore che vuole rifiutare con la stessa cura che riservi a quello che accetta. Strumenti come Cookiesh possono mostrare banner geolocalizzati per il Regolamento generale sulla protezione dei dati (GDPR), il CCPA e la LGPD tramite un loader che non provoca spostamenti del layout, così il tuo team può concentrarsi su testi e design.

*Questo articolo ha carattere puramente informativo e non costituisce consulenza legale. Per decisioni relative alla tua situazione specifica, rivolgiti a un professionista qualificato in materia di privacy.*

## FAQ

### Il banner dei cookie deve essere una finestra modale o una barra in basso?

Entrambe le soluzioni possono essere conformi. Una finestra modale impone una decisione ma risulta più invasiva e deve comunque offrire un rifiuto semplice. Una barra o un riquadro in un angolo è meno invasivo, e i cookie non essenziali restano semplicemente disattivati finché il visitatore non sceglie.

### Quanto deve essere lungo il testo del banner?

Abbastanza breve da poter essere letto in pochi secondi, di solito due o tre frasi nel primo livello. Riserva i dettagli al livello delle impostazioni e alla cookie policy, ma assicurati che il primo livello indichi comunque le finalità principali.

### Mi serve un banner diverso per i visitatori statunitensi?

Spesso sì. I visitatori dell'UE e del Regno Unito hanno bisogno di un banner opt-in, mentre la California adotta un modello opt-out con un link “Do Not Sell or Share My Personal Information”. Il geotargeting ti permette di mostrare a ciascuna area l'esperienza corretta.

### Posso fare A/B testing sul banner dei cookie?

Puoi testare layout, testi e posizionamento, ma ogni variante deve essere conforme di per sé. Ottimizzare il tasso di accettazione rendendo più difficile il rifiuto è esattamente ciò che le autorità contestano.

## Sources

- [EDPB Guidelines 05/2020 on consent](https://www.edpb.europa.eu/our-work-tools/our-documents/guidelines/guidelines-052020-consent-under-regulation-2016679_en)
- [web.dev: Web Vitals](https://web.dev/articles/vitals)
- [IAB Europe Transparency & Consent Framework](https://iabeurope.eu/transparency-consent-framework/)
- [Global Privacy Control](https://globalprivacycontrol.org/)