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