Sito in aggiornamento

Il sito è in fase di aggiornamento dopo la sostituzione del sito vecchio.

Rendere il Cookie Banner di Iubenda accessibile

Iubenda è un pratico tool che permette di aggiungere il cookie banner in un sito web, in pochi passi. Se non hai particolari esigenze, è utile perché garantisce la creazione di Cookie Policy e Privacy Policy in autonomia.

 Slide 1: Rendere il Cookie Banner di Iubenda accessibile

Cosa trovi in questa pagina:

  1. Migliorare l’accessibilità del Cookie Banner Iubenda
  2. Problemi di accessibilità
  3. Soluzioni proposte
  4. Usa il codice custom Iubenda
  5. Cambia l’ordine dei bottoni
  6. Migliora stile e testi
  7. Sito multilingua: come fare?
  • Migliorare l’accessibilità del Cookie Banner Iubenda

    Iubenda è un pratico tool che permette di aggiungere il cookie banner in un sito web, in pochi passi. Se non hai particolari esigenze, è utile perché garantisce la creazione di Cookie Policy e Privacy Policy in autonomia. Su WordPress basta installare il plugin di Iubenda e incollare i codici generati per mostrare il Cookie Banner in modo automatico. Stile e contenuti saranno di tipo default. Per vedere meglio puoi andare al sito ufficiale di Iubenda.

  • Problemi di accessibilità

    La soluzione automatica però ha dei problemi di accessibilità. I principali sono 3:

    • Posizione sbagliata nel DOM. Senza modifiche, il banner viene posizionato alla fine del DOM. Questo vuol dire che se navighi con tastiera o con Screen Reader, sarà più difficile chiudere il banner o accettare i cookie;
    • Posizione sbagliata dei bottoni. Senza modifiche, l’ordine che compare è: Vedi i cookie, Rifiuta, Accetta. C’è un link aggiuntivo per vedere i cookie nel testo;
    • Stile e testi. Si possono sicuramente migliorare per migliorare l’accessibilità e l’esperienza di lettura in generale.
     Slide 3: Perché personalizzarlo? 3 problemi del banner automatico
  • Soluzioni proposte

    Ecco alcune proposte per migliorare l’accessibilità del Cookie Banner:

     Slide 4: Soluzioni
  • 1. Usa il codice custom Iubenda

    • Tra le impostazioni di Iubenda è disponibile l’opzione per mettere il banner all’inizio del body (prependOnBody).
    • C’è una soluzione migliore: usa il codice da mettere nel. In questo modo hai maggiore controllo sul banner.
  • 2. Cambia l’ordine dei bottoni

    Per modificare l’ordine di lettura con tastiera e SR potremmo usare le proprietà tabindex. Questo però non è ottimale. Attraverso il codice HTML puoi modificare l’ordine e far corrispondere l’ordine di lettura con il DOM.

  • 3. Migliora stile e testi

    Sovrascrivi lo stile CSS per migliorare l’accessibilità del banner e modifica i testi per migliorare la leggibilità. Per lo stile nell’esempio mi sono ispirato al banner GOV.UK, facile da individuare per chi usa lo zoom.

  • 4. Sito multilingua: come fare?

    • Nessun problema. Mirco Babini ha scritto un codice utile per mostrare i contenuti tradotti in base al parametro lang del sito;
    • Se non vuoi caricare jQuery, puoi integrare il codice precedente con una soluzione Vanilla JavaScript.
  •  Slide 9: Referenze