Cookie banner (accessibilità)

Definizione — Il cookie banner è il componente che informa su finalità e uso dei cookie e raccoglie il consenso. Dal punto di vista dell’accessibilità deve essere utilizzabile da tutte le persone, anche con tecnologie assistive, senza barriere: operabile da tastiera, correttamente annunciato dai lettori di schermo, leggibile (contrasto, testo), navigabile in modo logico e responsive.

Requisiti essenziali (WCAG 2.1 / EN 301 549)

• Tastiera (2.1.1): tutte le azioni (Accetta, Rifiuta, Personalizza) devono essere raggiungibili e attivabili con Tab/Shift+Tab/Enter/Space.
• Focus visibile (2.4.7) e ordine di focus (2.4.3): il focus entra nel banner all’apertura e non “salta” elementi.
• Nome, Ruolo, Valore (4.1.2) e Label in Name (2.5.3): i bottoni hanno etichette chiare; l’accessible name contiene il testo visibile (es. “Accetta tutti i cookie”).
• Contrasto (1.4.3) e reflow (1.4.10): leggibile a 200–400% senza perdita di contenuti, senza scroll orizzontale su testo.
• Informazioni e relazioni (1.3.1): titoli, liste e gruppi di controlli correttamente marcati; uso prudente di ARIA.

UX inclusiva (niente dark pattern)

• Scelte equivalenti: “Accetta tutti” e “Rifiuta tutti” con pari evidenza (stile, dimensione, posizione). “Personalizza” per consenso granulare.
• Persistenza e revoca: pulsante “Preferenze cookie” sempre disponibile (es. in footer) per riaprire il pannello.
• Testi chiari: linguaggio semplice, finalità in elenco, link all’informativa estesa.

Marcatura consigliata (dialog accessibile)

<div id="cookie-banner" role="dialog" aria-modal="true"
     aria-labelledby="cb-title" aria-describedby="cb-desc">
  <h2 id="cb-title">Preferenze cookie</h2>
  <p id="cb-desc">Usiamo cookie per analisi e personalizzazione.
     Puoi accettare, rifiutare o scegliere le finalità.</p>

  <div role="group" aria-labelledby="cb-purpose-title">
    <h3 id="cb-purpose-title">Finalità</h3>
    <ul>
      <li>
        <label><input type="checkbox" name="analytics"> Analytics</label>
      </li>
      <li>
        <label><input type="checkbox" name="ads"> Pubblicità</label>
      </li>
    </ul>
  </div>

  <div class="actions">
    <button type="button" id="cb-reject">Rifiuta tutti</button>
    <button type="button" id="cb-accept">Accetta tutti</button>
    <button type="button" id="cb-save">Salva preferenze</button>
  </div>
</div>

<button id="cookie-prefs" aria-haspopup="dialog">Preferenze cookie</button>

Comportamento minimo (JS)

• All’apertura: sposta il focus al titolo del dialog; abilita Esc solo se è presente una scelta equivalente di rifiuto.
• Trappola del focus nel dialog finché l’utente non conferma; usa inert sul body (o aria-hidden come fallback) per disattivare lo sfondo.
• Dopo la scelta: restituisci il focus all’elemento che lo aveva (es. bottone “Preferenze cookie”).
• Non attivare script opzionali prima del consenso; applica preferenze anche al reload.

Errori comuni

• Mancanza del pulsante “Rifiuta tutti” o reso meno visibile (contrasto/posizionamento).
• Dialog non etichettato (mancano aria-labelledby/aria-describedby) o non raggiungibile da tastiera.
• Testo minuscolo/contrasto insufficiente; controlli troppo piccoli su mobile.
• Focus che “scappa” dietro al banner; impossibile chiudere/personalizzare da tastiera.

Checklist rapida

• Operabile al 100% da tastiera con focus visibile.
• Etichette chiare e “Label in Name”.
• Accetta/Rifiuta/Personalizza con pari evidenza.
• Reflow e contrasto conformi WCAG; riapertura preferenze sempre disponibile.