Accessibilità Web:
Rendere il Cookie Banner
di Iubenda accessibile

Scarica PDF di questo post (peso: 2,08 MB)

Vai all'archivio: #MartedìAccessibile

Numero del post: Settimana 30

Data di pubblicazione: 18 Ottobre 2022

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:

  1. 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;
  2. 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;
  3. Stile e testi. Si possono sicuramente migliorare per migliorare l’accessibilità e l’esperienza di lettura in generale.

Soluzioni proposte

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

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 <head>. 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?